Question

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

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控制台检查，似乎'fullname'的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

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

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

Answer 3

请参阅this链接。

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 4

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

请参阅下面的示例表： JQuery Data Table

该插件已有详细记录，并被广泛使用。应该很容易进入现有的应用程序，并相应地设置它的样式。

希望这有帮助！

使用javascript搜索表内容

4 个答案: