JavaScript 表格数据搜索功能

本文为大家介绍如何实现一个表格数据搜索的功能。

HTML 代码：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索...">
<table id="myTable"><tr class="header">  <th style="width:60%;">名称</th>  <th style="width:40%;">城市</th></tr><tr>  <td>Alfreds Futterkiste</td>  <td>Germany</td></tr><tr>  <td>Berglunds snabbkop</td>  <td>Sweden</td></tr><tr>  <td>Island Trading</td>  <td>UK</td></tr><tr>  <td>Koniglich Essen</td>  <td>Germany</td></tr>
</table>




CSS 代码：

#myInput {  background-image: url('https://static.runoob.com/images/mix/searchicon.png'); /* 搜索按钮 */  background-position: 10px 12px; /* 定位搜索按钮 */  background-repeat: no-repeat; /* 不重复图片 */  width: 100%;  font-size: 16px;  padding: 12px 20px 12px 40px;  border: 1px solid #ddd;  margin-bottom: 12px; 
}
#myTable {  border-collapse: collapse;   width: 100%;   border: 1px solid #ddd;  font-size: 18px; 
}
#myTable th, #myTable td {  text-align: left;  padding: 12px;
}
#myTable tr {  /* 表格添加边框 */  border-bottom: 1px solid #ddd; 
}
#myTable tr.header, #myTable tr:hover {  /* 表头及鼠标移动过 tr 时添加背景 */  background-color: #f1f1f1;
}




JavaScript 代码：

function myFunction() {// 声明变量var input, filter, table, tr, td, i;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) {    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {      tr[i].style.display = "";    } else {      tr[i].style.display = "none";    }  } }
}






提示： 如果你需要区分大小写可以移除 toUpperCase() 方法。
提示： 如果你需要检索第二列（城市）可以将 tr[i].getElementsByTagName('td')[0]
修改为 [1] 。索引值从 0 开始，即 0 为第一列，1 为第二列，以此类推。



在线演示

                        
                        
下一节：Python OpenSSL 漏洞扫描
程序设计
Linux 服务器会使用 OpenSSL 协议，但是 OpenSSL 有些低版本会存在漏洞，比如著名的"受戒礼"或"贵兵犬"漏洞，这里利用 Python paramiko 库编写了一个 Windows ...