您的位置：首页 > 其它

DOM 多字符搜索

2016-03-12 12:03 204 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
window.onload = function(){
var oTab = document.getElementById("tab1");
var oName = document.getElementById("name");
var oBtn = document.getElementById("btn1");

oBtn.onclick = function(){

for(var i = 0 ; i <oTab.tBodies[0].rows.length;i++)
{
var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sName = oName.value.toLowerCase() ;

var arr = sName.split(" ");//将 输入框中的内容以空格分割成数组

oTab.tBodies[0].rows[i].style.background = "";

//对输入框中每一个 数组下标进行循环
for(var j=0 ; j <arr.length;j++)
{
//判断查找输入框中的内容 如果找到不等于-1
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.background = "yellow";
}
}

}
}

}
</script>
<body>
姓名：<input type="text"  id="name"/>
<input id="btn1" type="button"  value="搜索"/>
<table id="tab1" border="1" width="500">

<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
<td></td>
</tr>

</tbody>

</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航