4

用户是否有可能选择表格的任何列并且我可以使用 jQuery 来实现？

我有这个例子可以玩：http: //jsbin.com/oluyex/1/edit

查询。我不知道如何选择每个 th 的孩子：

$(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>
4

3 回答 3

4

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

$('th').click(function() {
    var th_index = $(this).index();
    $('tr').each(function() {
        $(this).find('td').eq(th_index).toggleClass('highlight');
    });
});
于 2012-12-21T18:04:21.960 回答
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");  
    });
})

在这里测试

于 2012-12-21T18:05:11.403 回答
1

另一个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/

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

于 2012-12-21T17:59:14.440 回答