序号 | 名字 | 年龄 | 操作 |
1 | 张三 | 25 | |
2 | jeep | 12 | |
3 | 李四 | 38 | |
4 | john | 23 | |
5 | 王四 | 12 | |
6 | 张六 | 44 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script>
window.onload = function ()
{
var oTab = document.getElementById('table');
//alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
var oTxt = document.getElementById('txt1');
var oBtn = document.getElementById('btn1');
oBtn.onclick = function ()
{
for(var i = 0;i<oTab.tBodies[0].rows.length;i++ )
{
var oStringTxt = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var oInputTxt = oTxt.value.toLowerCase();//str.toLowerCase()转为小写 split(" ")遇见空格就切割
var arr = oInputTxt.split(" ");
for(var j = 0; j<arr.length; j++)
{
if( oStringTxt.search(arr[j])!= -1) //seach()==-1那就是未找到,而!=-1就是已找到
{
oTab.tBodies[0].rows[i].style.background = "yellow";
}
else
{
oTab.tBodies[0].rows[i].style.background = "";
}
}
}
}
}
</script>
</head>
<body>
<label for="">名字:</label><input type="text" id="txt1"/><input type="button" value="查找" id="btn1"/>
<table id="table" border="1" width="500">
<thead>
<tr>
<td>序号</td>
<td>名字</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>jeep</td>
<td>12</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>38</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>john</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>王四</td>
<td>12</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>张六</td>
<td>44</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
如果思路错误怎么修改???
这样的代码或者说实现方式,就算结果正确也是没有多少现实意义的。
1、通常的WEB表格,不会在页面上显示几千几万行,而是采用分页方式实现,也就是说一个页面上
通常最多20~50行数据,一眼就可以看清了,基本不需要查找功能。
2、采用分页方式时,查找的功能通常是要求能够查找全部的数据,而不是页面上的数据。
3、如果只是要查找代码中的错误,你可以使用Chrome的javascript调试器单步执行看看,哪儿出问题了。