首页 新闻 会员 周边 捐助

为什么输入 张 j然后点击查找,关于“张”的找出来了,关于“j”没被找出来

0
[待解决问题]

序号 名字 年龄 操作
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>

 

如果思路错误怎么修改???

web全端小屋的主页 web全端小屋 | 菜鸟二级 | 园豆:202
提问于:2015-01-11 16:31
< >
分享
所有回答(1)
0

这样的代码或者说实现方式,就算结果正确也是没有多少现实意义的。

1、通常的WEB表格,不会在页面上显示几千几万行,而是采用分页方式实现,也就是说一个页面上

通常最多20~50行数据,一眼就可以看清了,基本不需要查找功能。

2、采用分页方式时,查找的功能通常是要求能够查找全部的数据,而不是页面上的数据。

 

3、如果只是要查找代码中的错误,你可以使用Chrome的javascript调试器单步执行看看,哪儿出问题了。

爱编程的大叔 | 园豆:30844 (高人七级) | 2015-01-12 09:49
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册