Question

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

       <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>

      <script>
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";
            }
        }
    }

}

Answer 1

我想强调一下这段代码的一些内容：

在你的代码中，循环从0开始，因为表的第一行是标题行，它不包含任何“tr”元素。因此，您的功能无效。
如果我们从1开始循环，则需要通过input元素来搜索值。现有方法无法运作。

如果循环从1开始，你的fullname变量将如下所示：

您可能需要通过获取输入字段的值来修改比较逻辑。

Answer 2

好的，这是一个工作版本，但你的算法并不完美。您可以调试并修复逻辑错误：

第一个问题：

onKeyUp="javascript:doSearch();"

JSFiddle

与你的相比有许多语义错误，仍然不完美：（lass然后3个字母问题，以及它找到的情况）

如果你输入“course”，它会找到，但仍然保持全部可见（你必须修复它，这很容易。）如果你输入少于3个字母，什么都不做，不要隐藏所有字母。

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");
    if (fullname.length > 0) {
        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";
            }
        }
    }
  }
}

Answer 3

你的html是你想要的吗？您似乎想要创建一个包含行的表，然后根据用户输入过滤这些行。你的html现在的方式，只有一行。

修复后，我建议使用jquery。这是一个让你入门的小提琴：http://jsfiddle.net/SuRWn/11/

$(function () {
    var q = $('#q'),
        boxes = $('td input');

    $('#q').on('keyup', function (e) {
        var qterm = q.val();

        if (qterm.length < 3) {
            boxes.show();
        } else {
            boxes.each(function(i,o) {
                var box = $(this);
                box.toggle(box.val().indexOf(qterm) > -1);
            });
        }
    });
});

编辑请注意，小提琴正在过滤您的输入框，现在是过滤行（因为没有要过滤的行）

表中的搜索数据无效

3 个答案: