2

我正在使用一段代码来过滤表中的行。它在除 Firefox v3.0.x 之外的所有浏览器中都能完美运行（适用于 3.1 beta 2）。当我在 Firefox 3.0.x 中运行该代码段时，它显示children is undefined. 我也在使用 jQuery v1.2.6。

代码片段：

var bodyRows = $("#resultsTable tbody tr");
bodyRows.each(function(n){
    if(!filterPattern.test($.trim(this.children[2].innerHTML))){ //errors here
            this.style.display = 'none';
    }
    else {
            this.style.display = '';
    }
});

代码选择所有表格行，然后循环遍历它们，测试第三列的 innerHTML 文本。如果 RegEx 测试失败，则隐藏该行，否则显示该行。

有没有人看到这个问题和/或知道如何让它工作？

谢谢

编辑： 这是表格的 HTML 标记。为简洁起见，我只提供了 2 条记录，尽管更多的记录。

<table id="resultsTable" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>First</th>
                <th>Last</th>
            <th>City</th>
            <th>State</th>
            <th>Zip</th>
            <th>Email</th>
            <th>&nbsp;</th>
        </tr>
    </thead>    
    <tbody id="resultsBody">
        <tr>
            <th>James</th>
                <th>Eggers</th>
            <th>SomeCity</th>
            <th>IA</th>
            <th>55555</th>
            <th>email@email.com</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <th>John</th>
                <th>Doe</th>
            <th>SomeCity</th>
            <th>KY</th>
            <th>88888</th>
            <th>email2@email.com</th>
            <th>&nbsp;</th>
        </tr>
    </tbody>        
</table>
4

4 回答 4

4

为什么不使用 jQuery 来遍历 DOM 元素呢？

var bodyRows = $("#resultsTable tbody tr");
bodyRows.each(function(){
    var thirdCell = $(this).find('td').eq(2);
    if(!filterPattern.test($.trim(thirdCell.html()))){
        this.style.display = 'none';
    } else {
        this.style.display = '';
    }
});

.text()如果您只想返回没有任何可能标记的文本，也可以使用 ' '。

该属性children是仅 IE 的 DOM 属性，其他浏览器没有（据我所知）。Firefox 使用标准属性childNodes来访问子级。问题childNodes在于它认为空白和文本是一个节点（或者至少 Firebug 是这样说的），这使得它（在我看来）非常难以处理。如果你有 JavaScript API，你应该利用它，这样你就不必处理浏览器的 DOM 遍历技术之间的差异。

于 2009-01-10T22:43:15.390 回答
1 
if(!filterPattern.test($.trim(this.children[2].innerHTML)))

当一个 'each' 回调被 jQuery 调用时，'this' 是一个直接的浏览器 DOM 节点，而不是一个 jQuery 对象。

出现混淆的原因是 jQuery 在其 DOM 包装器上提供了一个“children”方法，而 IE 在其原生 DOM 节点上提供了一个非标准的“children”集合，但是这两个接口几乎完全不兼容。

所以对于 jQuery 版本使用 $(this).children()[2] 或类似的，或者对于标准 DOM 版本使用 this.getElementsByTagName('td')[2] 。

（假设您打算将表格数据元素设为“td”而不是“th”，您可能已经这样做了。另外，您可能想要获取单元格的原始文本，而不是可能有字符以意想不到的方式转义的 innerHTML 版本。 )

于 2009-01-10T23:55:07.290 回答
0

在尝试访问第三个元素之前，您可能需要检查子元素的数量。

于 2009-01-10T22:18:35.907 回答
0

您是否明确添加

<tbody>
   ...
</tbody>

标签到你的桌子？如果没有，我会说从以下位置删除“tbody”部分： $("#resultsTable tbody tr");

只是 $("#resultsTable tr");

我很好奇这个版本的 Firefox 是否没有为你隐式创建它。

于 2009-01-10T22:31:33.057 回答