JavaScript实现表格搜索功能 | 豆包MarsCode AI刷题

概述

在日常生活中，经常需要用到表格来对数据进行处理。查找或搜索是数据处理中经常使用的操作，但面对大量的数据，只凭双眼查找非常麻烦，这时候就需要用到一些程序来进行辅助。

在本示例中，将使用HTML和JavaScript实现表格的搜索功能。用户需要在搜索框中输入被查找对象的姓名，进而查找该对象在4个学科中取得的成绩。

代码实现

建立表格

首先，使用HTML语法分别建立ID为myInput的输入框和ID为myTable表格。其中，输入框作为搜索框出现；表格用于展现基础数据。

<input type="text" id="myInput" placeholder="查找...">

<div>
    <table id="myTable">
        <thead>
            <tr>
                <th>姓名</th>
                <th>学科1</th>
                <th>学科2</th>
                <th>学科3</th>
                <th>学科4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>93</td>
                <td>95</td>
                <td>83</td>
                <td>100</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>44</td>
                <td>61</td>
                <td>38</td>
                <td>48</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>84</td>
                <td>83</td>
                <td>69</td>
                <td>39</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>76</td>
                <td>38</td>
                <td>61</td>
                <td>98</td>
            </tr>
        </tbody>
    </table>
</div>

设置简单CSS样式后的表格效果如图所示：

添加事件

在<script></script>标签中添加自定义函数filter_table()。

要想使函数正常运行，需要在代表输入框的input标签中添加一行代码onkeyup="filter_table()"，这表示当用户在输入框中通过键盘输入内容时，filter_table()函数执行。

设置初始变量

首先，需要设置一些初始变量。具体代码如下：

var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var tr = table.getElementsByTagName("tr");

各变量的具体作用如下：

• input：用于获取网页中ID为"myInput"的输入框。
• filter：用于获取在input（网页中ID为"myInput"的输入框）中输入的字符串。（其中toUpperCase()方法将字符串转换为大写字母，在字符串为中文字符的情况下没有实际用处）
• table：用于获取网页中ID为"myTable"的表格。
• tr：用于获取table（网页中ID为"myTable"的表格）中每一行的内容。

遍历列表

一般使用for循环遍历整个列表。在本示例中，如果表中某一行第一项的内容与输入的关键词不匹配，则将该项隐藏，换句话说就是使该项CSS样式暂时设置为display: none。

具体代码如下：

for (let i = 0; i < tr.length; i++) {
    var td = tr[i].getElementsByTagName("td")[0];
    if (td) {
        var txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }
}

完整代码

function filter_table() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");

    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}

实现效果

总结

• JavaScript在前端开发中扮演着关键角色，它可以通过实时修改HTML元素和CSS样式，或实时响应用户的操作和事件，使网页更加生动，提升用户体验并增强互动性。此外，Javascript丰富的内置函数和对象，可以进行数据处理、计算和逻辑判断，实现复杂的业务逻辑和算法。
• 搜索功能在日常生活中非常常见。上文所提到的示例只是一个简单的方法，真正的搜索框背后的代码其实更加复杂，它包含了高级搜索需要用到的算法，这就需要我们进一步去探究了。

参考资料

• JavaScript/CSS 表格搜索功能 | 菜鸟教程