Question

我想在表格中搜索。我从教程网站复制了一个workin JS。它运作得很好

查看原始工作配置 - ＆gt; http://jsfiddle.net/9T9CZ/4/

只需在文本框中输入内容，例如Flower，如果您想搜索花卉。

我的修改后，内部添加了一个<tr> <div>，搜索停止了工作。

mod.Fiddle Version：http://jsfiddle.net/9T9CZ/5/

如果您在搜索框中键入任何字母，则会出现Firebug：targetTable.rows.item(...).cells.item(...) is null

我相信这个问题是新<tr>

中的emty div

有没有人有想法纠正这个问题或解决问题？

Answer 1

您已关闭，添加colspan会破坏您的代码。不需要仅检测第一行中的单元格数量，而是需要检查每一行。

下面的代码段可以解决这个问题。我也简化了你的代码。

function doSearch() {
    var searchText = document.getElementById('searchTerm').value.toLowerCase(),
        table = document.getElementById('dataTable'),       
        text = (document.body.textContent) ? 'textContent' : 'innerText', // Feature detection
        rows = table.rows, // Caching rows
        rLen = rows.length, 
        r, rowText, cells, cols, c;

    for (r = 1; r < rLen; r++) { // Ignoring the first row
        if (rows[r].className.indexOf('some_classname') < 0) {continue;} // className check
        rowText = '';
        cells = rows[r].cells; // Caching the cells
        cols = cells.length;
        for (c = 0; c < cols; c++) {
            rowText += cells[c][text];
        }
        rowText = rowText.toLowerCase();
        if (rowText.indexOf(searchText) < 0) {
            table.rows[r].style.display = 'none';
        } else {
            table.rows[r].style.display = 'table-row';
        }
    }
}

innerText / textContent的功能检测，而不是浏览器检测。
忽略thead从r开始1循环（thead唯一允许的直接内容为tr）
缓存.rows和.cells个集合使代码更快

A live demo at jsFiddle

JS-Search功能失败

1 个答案: