Javascript-搜索功能在 IE 中的有趣行为

Question

我使用搜索功能在表格内搜索，并隐藏不包含搜索项的列。

这在我的 Firefox、Opera 和 Safari 项目中非常有效。但在 IE 中，搜索功能不起作用。

JS:

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('search_for') < 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';
    }
}
}

HTML:

<table id="searchTerm">
<?php while($info = mysqli_fetch_array($data )): ?>
<tr id="tr_<?php echo $info['ID'];?>" class="search_for">
<td><?php echo $info['text'];?></td>
</tr>
<tr id="detail_tr_<?php echo $info['ID'];?>" >
<td>detail text....</td>
</tr>
<?php endwhile; ?>
<tr id="test"><td>X</td></tr>
</table>

php while 将输出几行。

所以，我发现了什么。

rows = table.rows,在 Javascript 中只注意到 <tr>的 id 为“detail_tr”，普通的“tr_”不会被注意到。

另一个非常奇怪的事情是，在 IE 的 Debugger 中，我可以看到“rows”包含什么。

<tr>带有“detail_tr”的被检测为 [objectHTMLTableRowElement] <tr>以“test”作为 id，被检测为 [objectHTMLCollection]

我添加了一个图像，在上半部分你可以看到调试器，在下半部分你可以看到html资源管理器:http://postimg.org/image/94leleccj/

这里可能有什么问题？!

Answer 1

我创建了一个jsfiddle.net您的代码在 IE9+ 中运行得很好

JavaScript:

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('search_for') < 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';
            document.getElementById('detail_' + table.rows[r].id).style.display = 'none';
        } else {
            table.rows[r].style.display = 'table-row';
            document.getElementById('detail_' + table.rows[r].id).style.display = 'table-row';
        }
    }
}

HTML:

<input type="text" id="searchTerm" /> <button onclick="doSearch()">doSearch()</button>

<table id="dataTable">
    <tr><th>table</th></tr>
    <tr id="tr_1" class="search_for">
        <td>bar</td>
    </tr>
    <tr id="detail_tr_1" >
        <td>foo bar</td>
    </tr>
    <tr id="tr_2" class="search_for">
        <td>baz</td>
    </tr>
    <tr id="detail_tr_2" >
        <td>foo baz</td>
    </tr>
    <tr id="test"><td>X</td></tr>
</table>