将鼠标事件添加到colgroup或col

时间:2021-07-26 20:24:09

Is it possible to add jQuery mouse events on cols or colgroups. We have tried to do so, but it didn't seem to work. On the other hand those cols have a real width and height. Is there a way to make those event work with col?

是否可以在cols或colgroups上添加jQuery鼠标事件。我们试图这样做,但它似乎没有用。另一方面,那些cols具有真实的宽度和高度。有没有办法让这些事件与col一起工作?

2 个解决方案

#1


1  

I'm not sure that a colgroup can be given handlers that would react to events over any cell in the group.

我不确定colgroup是否可以被赋予处理程序,以响应组中任何单元格上的事件。

You could alternatively give each cell in the group a specific class. Although, if there are a "lot", it wouldn't perform well.

您也可以为组中的每个单元格指定一个特定的类。虽然,如果有“很多”,它就不会表现良好。

<tr>
  <td class="c1"> column1 </td>
  <td></td>
</tr>

...

cols1 = $(".c1").css('background','#EEE');

Once you get a handle on cols1, keep it until the DOM structure of the table cells change. You won't have to keep iterating the DOM via the selector to get the collection of DOM elements which match.

获得cols1的句柄后,保持它直到表格单元格的DOM结构发生变化。您不必通过选择器继续迭代DOM以获取匹配的DOM元素的集合。

#2


1  

You might be able to achieve what you're after using the nth-child selector: http://api.jquery.com/nth-child-selector/

您可以使用nth-child选择器实现目标:http://api.jquery.com/nth-child-selector/

$('tr > td:nth-child(1)').length; // col 1
$('tr > td:nth-child(2)').length; // col 2
$('tr > td:nth-child(3)').length; // col 3
...

#1


1  

I'm not sure that a colgroup can be given handlers that would react to events over any cell in the group.

我不确定colgroup是否可以被赋予处理程序,以响应组中任何单元格上的事件。

You could alternatively give each cell in the group a specific class. Although, if there are a "lot", it wouldn't perform well.

您也可以为组中的每个单元格指定一个特定的类。虽然,如果有“很多”,它就不会表现良好。

<tr>
  <td class="c1"> column1 </td>
  <td></td>
</tr>

...

cols1 = $(".c1").css('background','#EEE');

Once you get a handle on cols1, keep it until the DOM structure of the table cells change. You won't have to keep iterating the DOM via the selector to get the collection of DOM elements which match.

获得cols1的句柄后,保持它直到表格单元格的DOM结构发生变化。您不必通过选择器继续迭代DOM以获取匹配的DOM元素的集合。

#2


1  

You might be able to achieve what you're after using the nth-child selector: http://api.jquery.com/nth-child-selector/

您可以使用nth-child选择器实现目标:http://api.jquery.com/nth-child-selector/

$('tr > td:nth-child(1)').length; // col 1
$('tr > td:nth-child(2)').length; // col 2
$('tr > td:nth-child(3)').length; // col 3
...