javascript - 使用 javascript 搜索表格内容

Question

我目前正在研究javascript。在这段代码中，我有一个表格和一个文本框。当我在文本框中输入数据时，它应该显示我输入的特定值，但它不会从表中搜索任何数据。如何搜索表格中的数据？

这是一个 jsfiddle http://jsfiddle.net/SuRWn/

HTML：

<table name="tablecheck" class="Data" id="results" >
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
            <th><center> <b>COURSE CODE</b></center></th>
            <th><center>COURSE NAME</center></th>
        </tr>
    </thead>
    <tbody>
        <tr id="rowUpdate" class="TableHeaderFooter">

            <td >
                <center> <input    type="text"    name="input"    value="course" ></center>
                <center> <input    type="text"    name="input"    value="course1" ></center>
                <center> <input    type="text"    name="input"    value="course2" ></center>
            </td>
            <td>
                <center> <input    type="text"    name="input"    value="subject" ></center>
                <center> <input    type="text"    name="input"    value="subject1" ></center>
                <center> <input    type="text"    name="input"    value="subject2" ></center>
            </td>
        </tr>
    </tbody>
</table >
<form action="#" method="get" onSubmit="return false;">
    <label for="q">Search Here:</label><input type="text" size="30" name="q" id="q" value="" onKeyUp="doSearch();" /> 
</form>

Javascript：

<script type="text/javascript">
//<!--
function doSearch() {
    var q = document.getElementById("q");
    var v = q.value.toLowerCase();
    var rows = document.getElementsByTagName("tr");
    var on = 0;
    for ( var i = 0; i < rows.length; i++ ) {
        var fullname = rows[i].getElementsByTagName("td");
        fullname = fullname[0].innerHTML.toLowerCase();
        if ( fullname ) {
            if ( v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1 ) ) {
                rows[i].style.display = "";
                on++;
            } else {
                rows[i].style.display = "none";
            }
        }
    }
}
//-->
</script>

Answer 1

使用 chrome 控制台检查，似乎“全名”的 innerHtml 正在返回错误：

var fullname = rows[i].getElementsByTagName("td");
fullname = fullname[0].innerHTML.toLowerCase();

那是因为您拥有的第一个 tr 标签位于 thead 中，并且根本没有任何 td 。将循环的开始更改为 1 将解决此问题：

for ( var i = 1; i < rows.length; i++ ) {    //... and so on

Answer 2

请参阅此链接。

HTML：

<table name="tablecheck" class="Data" id="results" >
    <thead>
        <tr>
            <th>Course</th>
            <th>Subject</th>
            <th>COURSE CODE</th>
            <th>COURSE NAME</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" value="course" /></td>
        <td><input type="text" value="subject" /></td>
        </tr>
        <tr>
            <td><input type="text" value="course1" /></td>
            <td><input type="text" value="subject1" /></td>
        </tr>
        <tr>
            <td><input type="text" value="course2" /></td>
            <td><input type="text" value="subject2" /></td>
        </tr>
    </tbody>
</table>
Search here (with jQuery):<input type="text" size="30" value="" onKeyUp="doSearchJQ(this);" /><br />
Search here:<input type="text" size="30" value="" onKeyUp="doSearch(this);" />  

Javascript：

function doSearchJQ(input) {
    var value = $(input).val();
    if (value.length > 0) {
        $("#results tbody tr").css("display", "none");
        $('#results input[value^="' + value + '"]').parent().parent().css("display", "table-row");
    } else {
        $("#results tbody tr").css("display", "table-row");
    }
}
function doSearch(input){
    var value = input.value;
    var table = document.getElementById('results');
    var tbody = table.querySelector("tbody");
    var rows = tbody.querySelectorAll("tr");
    var visible, row, tds, j, td, input;
    for (var i = 0; i < rows.length; i++) {
        visible = false;
        row = rows[i];
        tds = row.querySelectorAll("td");
        for (j = 0; j < tds.length; j++) {
            td = tds[j];
            input = td.querySelector("input");
            console.log(input.value.indexOf(value));
            if (input.value.indexOf(value) > -1) {
                visible = true;
                break;
            }
        }
        if (visible) {
            row.style.display = "table-row";
        } else {
            row.style.display = "none";
        }
    }
}  

使用 jquery，它的功能更加紧凑。但是您可以使用清晰的 javascript doSearch。

Answer 3

为什么不使用JQuery DataTables？该插件有一个非常好的表格视图以及自动启用的搜索文本框，并且应该很容易适应您的 JavaScript/PHP 解决方案。

请参见下面的示例表：

该插件有据可查，并被广泛使用。它应该很容易放入现有的应用程序中，并相应地对其进行样式设置。

希望这可以帮助！

Answer 4

yuvi的回答是正确的。我已经将它合并到一个小提琴中 - http://jsfiddle.net/dBs7d/8/ - 它还包含以下更改：

• 课程和主题的输入分组到单独的行中。
• td标签在标签下方对齐th。
• 重构代码以提高可读性。
• td我没有检查标签的 html，而是将其更改为检查标签的value属性input。这意味着您可以更改input并且仍然搜索的值。
• 我还将样式更改更改为使用backgroundColor. 这可以很容易地恢复为display.