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

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;

posted @ 2013-06-19 22:26  猫多多  阅读(484)  评论(0)  编辑  收藏  举报