JavaScript实现表格数据简单搜索功能
作者:半夏时间:2026-10-23 16:59:46浏览:407
本文介绍如何使用JavaScript实现简单的表格数据搜索功能。通过演示search和split两个字符串方法的区别与应用,展示如何根据输入关键词定位或分割数据,并提供了完整的HTML与JS代码示例供参考学习。
JavaScript表格搜索功能实现
本文分享一段使用JavaScript实现基础搜索功能的代码实例,供读者参考。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style>
table{
width: 500px;
}
td{
border:1px solid #ccc;
padding:5px;
}
</style>
<script>
window.οnlοad=function(){
var oTb=document.getElementById('tb');
var oldColor=null;
var tName=document.getElementById('name');
var oBtn=document.getElementById('btn');
oBtn.οnclick=function(){
var aRows=oTb.tBodies[0].rows;
for(var i=0;i<aRows.length;i++)
{
var tdValue=aRows[i].cells[1].innerHTML.toLowerCase();
var tNameValue=tName.value.toLowerCase().split(' ');
for(var j=0;j<tNameValue.length;j++)
{
if(tdValue.search(tNameValue[j])>=0)
{
aRows[i].style.background='green';
break;
}
else{
aRows[i].style.background='';
}
}
}
};
};
</script>
</head>
<body>
姓名:<input id='name' type="text"/>
<input id="btn" type="button" value="搜索" />
<table id="tb">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>26</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>青天决</td>
<td>28</td>
</tr>
<tr>
<td>5</td>
<td>赵少邦</td>
<td>23</td>
</tr>
</tbody>
</table>
</body>
</html>
在编写代码前,需注意以下关键点:
A.search(B)用于在字符串A中查找子串B的位置,并返回B首次出现的索引;A.split(B)则是以B为分隔符将A切割成多个部分,返回一个数组,这类似于分词操作。
程序运行后的效果如下所示:

如需了解更多搜索功能的实现技巧,可访问相关专题:javascript搜索功能汇总 进行深入学习。
以上就是本文的全部内容,希望能为读者的学习带来帮助,同时也欢迎大家继续支持本站。
作者最新文章
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
