Question

我想找出一个jQuery选择器，它将为我提供HTML表格中每行的第一个td。第一列，基本上。该解决方案必须在IE8中运行，因为我不幸需要支持该浏览器。

假设HTML表格如下：

<table id="tableID">
    <tr>
        <td>Cell 11</td><td>Cell 12</td><td>Cell 13</td>
    </tr>
    <tr>
        <td>Cell 21</td><td>Cell 22</td><td>Cell 23</td>
    </tr>
    <tr>
        <td>Cell 31</td><td>Cell 32</td><td>Cell 33</td>
    </tr>
</table>

因此，预期的最终结果是一个jQuery对象，仅包含包含文本“Cell 11”，“Cell 21”和“Cell 31”的tds。

还假设这个变量初始化：

var theTable = $('#tableID');

我看到的基于jQuery选择器的最佳解决方案是：

var firstCol = theTable.children('td:first-of-type');

但是，IE8不支持：first-of-type伪类。

我尝试过使用：first-child，但它似乎选择了每个tr中的文本节点而不是td。我的意思是键入的HTML中的换行符和制表符。

显然，我可以通过循环方式解决这个问题，或者通过向我正在寻找的每个td添加一个类或id来解决这个问题，但这不是重点。

Answer 1

第一个子选择器确实有效。您必须相对于tr元素进行查询。

var theTable = $('#tableID');
var firstCol = theTable.find('tr td:first-child');
firstCol.css('background-color', 'red');

http://jsfiddle.net/rNA6x/

Answer 2

问题在于使用.children（）而不是.find（）。孩子们只看着眼前的孩子，在这种情况下，IE8认为需要为我插入的tbody标签。查找递归搜索它所调用的对象下面的整个DOM。

var theTable = $( '#tableID' );
var firstCol = theTable.find( 'td:first-child' );
firstCol.css( 'background-color', 'red' );

我仔细检查过：带有.find（）的第一个类型，这仍然会引发错误。

可以使用.children（），但我们必须考虑tbody标记：

var firstCol = theTable.children().children().children('td:first-child');

或者：

var firstCol = theTable.find('tr').children('td:first-child');

使用jQuery在IE8中选择HTML表的每一行中的第一个TD

2 个答案: