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

Posted 2023-05-09

【中文标题】使用jQuery在IE8中选择HTML表格每一行的第一个TD

【英文标题】：Use jQuery to Select the First TD in Each Row of an HTML Table in IE8

【发布时间】：2014-04-29 13:59:56

【问题描述】：

我想找出一个 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”的 td。

还假设这个变量初始化：

var theTable = $('#tableID');

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

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

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

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

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

【问题讨论】：

你忘了IE8怎么样 ;)

我很想忘记 IE8

【参考方案1】：

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

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

http://jsfiddle.net/rNA6x/

【讨论】：

jsfiddle 在 IE8 中不起作用，所以我怀疑您是否在正确的浏览器中尝试过。

另外，td 是 tr 的唯一子级，因此指定 td 是第一个子级的父级应该是 tr 似乎并没有添加任何内容

我注意到你使用了 .find() 而不是 .children()，这让我找到了正确的答案

【参考方案2】：

问题在于使用 .children() 而不是 .find()。 Children 只是查看直接子项，在这种情况下，它是 IE8 决定需要为我插入的 tbody 标签。 Find 递归地搜索调用它的对象下方的整个 DOM。

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

我用 .find() 仔细检查了 :first-of-type，但仍然肯定会引发错误。

可以使用 .children()，但我们必须考虑到 tbody 标签：

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

或者：

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

【讨论】：

好吧，它插入<tbody> 标签的原因是因为那是正确的HTML。如果你把它放在自己身上，你就可以重新设计你的 theTable 选择器来抓取身体。

正确的 HTML 不需要 tbody 标签，而且我很少看到它包含在内。 w3.org 的 table tag entry 表示，除了 tfoot 和/或 thead 之外，表格可能包含“零个或多个 tbody 元素，或一个或多个 tr 元素”。

但是如果你还放在那里，你根本不会有这个问题。

您不必包含标签的事实将是他们可能希望摆脱的 HTML 编码的“坏部分”残余之一。就像 javascript 中的一半一样。于是就有了“Javascript The Good Parts”一书。

tbody 标签不对问题负责，也不会将其放入解决问题。问题在于使用 .children 而不是 .find。 .find 没有 tbody 可以工作，.children 不能使用它。我使用的示例表没有标题，因此我没有理由区分标题和正文，因此不需要thead 或tbody。如果我有标题，那么 IE 就不会知道，并且假设会将我的标题放在 tbody 中，这是不正确的。无论哪种方式，IE 都不应该为我编辑我的 HTML。