您的位置：首页 > Web前端 > JavaScript

9.js.table搜索str.search();str.toLowerCase();str.split();

2013-06-19 22:26 513 查看

table搜索记录：1搜索时不分字符串大小写：用str.toLowerCase();

　　　　　　　　2.搜索字符串中包含某字段：str.search(字段);它会返回该字段在字符串中的位置，如果字符串中无该字段，则返回-1；

　　　　　　　　3.搜索字段中含空格：用str.split(' ');将字符串用空格分开；

例子：遍历tbody里面的tr。比较tr里内容tr.innerHTML与txt输入框里文本字符串是否有相同的地方；

<body>
姓名：
<input id='txt1'type='text'/>
<input id='btn1' type='button' value='搜索'/>
<table id='tab1' border='1px solid black' width='280px'>
<thead>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>浩二</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>麻四</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>王五</td>
<td>29</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>张四</td>
<td>27</td>
<td></td>
</tr>
</tbody>
</table>
</body>

javascript代码：

<script>
window.onload=function(){
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');

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 sTxt=oTxt.value.toLowerCase();

var arr=sTxt.split(' ');
oTab.tBodies[0].rows[i].style.background='';
for(var j=0;j<arr.length;j++){
if(sTab.search(arr[j]) != -1){
oTab.tBodies[0].rows[i].style.background='yellow';
}
}

}
}
}
</script>

筛选时，只要把改变background改成改变display;

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

标签：

相关文章推荐

新的分享

章节导航