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;

原文地址:https://www.cnblogs.com/maoduoduo/p/3145093.html