码迷,mamicode.com
首页 > Web开发 > 详细

JS-DOM操作应用高级(二)

时间:2015-03-06 16:22:47      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:

搜索

字符串比较、忽略大小写----大小写转换、模糊搜索----search的使用、split、高亮显示及筛选

toLowerCase() 方法用于把字符串转换为小写

str.search(‘‘)  找到并且返回字符串出现的位置,如果没找到-1

split() 方法用于把一个字符串分割成字符串数组,下面的例子用空格切割

<script>
var str=‘abc 123 ert‘;
var arr=str.split(‘ ‘);
alert(arr);
</script>

技术分享

搜索

<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oTab=document.getElementById(tab1);
    var oTxt=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 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>
</head>

<body>
姓名:<input id="name" type="text"/>

<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>23</td>
        <td></td>
       </tr>
       <tr>
        <td>2</td>
        <td>张三</td>
        <td>24</td>
        <td></td>
       </tr>
       <tr>
        <td>3</td>
        <td>李四</td>
        <td>25</td>
        <td></td>
       </tr>
       <tr>
        <td>4</td>
        <td>王五</td>
        <td>26</td>
        <td></td>
       </tr>
       <tr>
        <td>5</td>
        <td>李六</td>
        <td>27</td>
        <td></td>
       </tr>
    </tbody>
</table>
</body>

技术分享

筛选 

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.display=‘none‘;
            
            for(var j=0;j<arr.length;j++)
            {
                if(sTab.search(arr[j])!=-1)
               {
                    oTab.tBodies[0].rows[i].style.display=‘block‘;
                }
            }    
        }
    }

技术分享

 

JS-DOM操作应用高级(二)

标签:

原文地址:http://www.cnblogs.com/919czzl/p/4318440.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!