Question

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

这在我的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,仅通知<tr>有＆＃34; detail_tr＆＃34;作为id，正常的＆＃34; tr _＆＃34;不要被注意到。

另一个非常奇怪的事情是，在IE的Debbuger中，我可以看到＆＃34;行＆＃34;包含的内容。

<tr>使用＆＃34; detail_tr＆＃34;被检测为[objectHTMLTableRowElement] <tr>使用＆＃34;测试＆＃34;作为ID，被检测为[objectHTMLCollection]

我添加了一个图像，在上半部分你可以看到调试器，在下半部分你看到html explorer：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>

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

1 个答案: