Javascript-Search函数在IE中的有趣行为 - Javascript-Search function interesting behavior in IE

Javascript-Search function interesting behavior in IE

本文关键字：函数 IE Javascript-Search | 更新日期: 2023-09-27

我使用搜索函数在表中搜索，并隐藏不包含搜索项的列。

这在我的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将输出几行。

所以，我发现了什么

Javascript中的rows = table.rows,只注意到以"detail_tr"作为id的<tr>，正常的"tr_"不会被注意到。

另一个非常奇怪的事情是，在IE的调试器中，我可以看到"行"包含什么。

带"detail_tr"的<tr>检测为[objectHTMLTableRowElement]以"test"为id的<tr>，被检测为[objectHTMLCollection]

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

这里有什么问题?!

我为你的代码创建了一个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>