Question

用户是否可以选择表格的任何列，并且我可以使用jQuery实现这一目标？

我在这里有一个例子：http://jsbin.com/oluyex/1/edit

JQUERY。我不知道如何选择每个孩子：

$(function(){
    $("th").click(function(){
        $(this).("children").css("background-color","red"); 
    });
})

HTML：

<table id="taula" border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Answer 1

要做到这一点，您需要做的就是获取表头的索引，然后使用该索引将该类应用于列中的每个表格单元格。您必须遍历每一行才能找到合适的表格单元格。 - http://jsfiddle.net/BMGKv/

$('th').click(function() {
    var th_index = $(this).index();
    $('tr').each(function() {
        $(this).find('td').eq(th_index).toggleClass('highlight');
    });
});

Answer 2

试试这个：

$(function(){
    $("th").click(function(){
      var idx = $(this).index()+1;
      $(this).parent().siblings().find("td").css("background-color","white");
      $(this).parent().siblings().find("td:nth-child("+idx+")").css("background-color","red");  
    });
})

测试here

Answer 3

其他th不是DOM中的子项，即使它们在标题下方可见。您应该提高对树数据结构的理解。

在任何情况下，HTML表都是以行为中心的，因此您必须手动或多或少地选择相应列中的每个表格单元格：

$("th").on('click', function () {
   $(this).closest('table').find('tr').find('td:eq(' + $(this).index() + ')')
      .css('background-color', 'red');
});

http://jsfiddle.net/VFWBN/

编辑：对于n-child，您可以跳过.find('tr')：http://jsfiddle.net/VFWBN/1/

使用jQuery选择任何列

3 个答案: