使用 jQuery 突出显示表格中的列答案

【问题标题】：Highlighting columns in a table with jQuery使用 jQuery 突出显示表格中的列
【发布时间】：2011-12-15 23:17:03
【问题描述】：

我有一个表，我正在使用 jquery 突出显示表中的备用列

$("table.Table22 tr td:nth-child(even)").css("background","blue");

但是，我在 <tr> 中还有另一个 <table> 作为最后一行。如何避免突出显示 <tr> 内的表格列？

【问题讨论】：

td:even 比使用 nth-child 还不够吗？

标签： javascript jquery

【解决方案1】：

使用> 后代选择器对其进行限定：

$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");

您也需要tbody 限定符，因为浏览器会自动插入tbody无论您是否在标记中使用它。

编辑：哎呀。谢谢安南。

编辑 2：强调 tbody。

【讨论】：

我认为您错过了一个子选择器？您需要将其设为“table.Table22 > tbody > tr > td:nth-child(even)”
不使用 tbody 怎么办？

【解决方案2】：

未经测试但可能：http://docs.jquery.com/Traversing/not#expr

$("table.Table22 tr td:nth-child(even)").not("table.Table22 tr td table").css("background","blue");

【讨论】：

【解决方案3】：

这是我用来在表格中突出显示嵌套复选框的一些代码。我需要能够执行“检查所有/取消检查所有”，但只能在嵌套内的单个级别内进行；也就是说，我不希望子元素也被选中。

var parentTable = $(this).parents("table:first");
var exclusions = parentTable.find("table :checkbox.select");
var checkboxes = parentTable.find(":checkbox.select").not(exclusions);

我会在我所在的当前表之上获取第一个表，获取此新找到的父表下方的所有复选框，然后将它们从我能找到的复选框的完整列表中排除。基本上，我找到了每个复选框，但随后排除了我找到的所有子复选框。

同样可以适用于您的情况；将复选框选择替换为列。

【讨论】：

【解决方案4】：

为什么不利用html的优势呢？

代替

<table>
  <tr>
    <td>
    ...
    </td>
  </tr>
</table>

试试

<table>
  <tfoot>
    <tr>
       <td>
       ...
       </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
      ...
      </td>
    </tr>
  </tbody>
</table>

您也可以使用<thead> 标签来操作标题。

现在你可以调用选择器了

$("table.Table22 tbody tr td:nth-child(even)").css("background","blue")

【讨论】：

【解决方案5】：

您是否测试了以下内容？

$("table.Table22 tr td:nth-child(even):not(:last-child)").css("background","blue")

【讨论】：

很抱歉我没有更多的线索:(

【解决方案6】：

这个页面定义了一个很好的选择列的函数 http://programanddesign.com/js/jquery-select-table-column-or-row/

【讨论】：