表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

浏览数：36 / 时间：2015年06月09日

　　看着网上的视频教程，虽说还是有点简单，但还是不免想记录下。这些操作包括（隔行变色，高亮显示，添加删除，搜索功能），而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几个方法，search方法，

split方法等等

　　效果体验：http://runjs.cn/detail/vm8bz8dl

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
    var tb = document.getElementById(‘tb‘);
    //alert(tb.getElementsByTagName(‘tbody‘)[0].getElementsByTagName(‘tr‘)[1].getElementsByTagName(‘td‘)[1].innerHTML);
    //alert(tb.tBodies[0].rows[1].cells[1].innerHTML);


    //表格隔行变色和鼠标滑过高亮
    var oldColor = ‘‘; //保存原有的背景色
    for (var i=0;i<tb.tBodies[0].rows.length;i++) {
        tb.tBodies[0].rows[i].style.background = i%2 ? ‘#CCC‘: ‘‘;

        tb.tBodies[0].rows[i].onmouseover = function(){
            oldColor  = this.style.background;
            this.style.background = ‘yellow‘;
        }

        tb.tBodies[0].rows[i].onmouseout = function(){
            this.style.background = oldColor;
        }
    };


    //添加和删除
    var oBtn = document.getElementById(‘btn1‘);
    var oTxt = document.getElementById(‘txt1‘);
    var iNowId =  tb.tBodies[0].rows.length+1;
    oBtn.onclick = function(){
        var oTr = document.createElement(‘tr‘);
        var oTd = null;

        oTd = document.createElement(‘td‘);
        oTd.innerHTML = iNowId++;
        oTr.appendChild(oTd);

        oTd  = document.createElement(‘td‘);
        oTd.innerHTML = oTxt.value;
        oTr.appendChild(oTd);

        oTd = document.createElement(‘td‘);
        oTd.innerHTML =‘<a href="javascript:void(0);">删除</a>‘;
        oTr.appendChild(oTd);

        oTd.getElementsByTagName(‘a‘)[0].onclick = function(){
            tb.tBodies[0].removeChild(this.parentNode.parentNode);
        }

        tb.tBodies[0].appendChild(oTr);
    }

    //搜索功能(应该算是精确搜索)
    var oBtn2 = document.getElementById(‘btn2‘);
    var oTxt2 = document.getElementById(‘txt2‘);
    oBtn2.onclick=function(){
        for(var i=0;i<tb.tBodies[0].rows.length;i++){
            var sValueInTb = tb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
            var sValueInTxt = oTxt2.value.toLowerCase().split(‘ ‘);
            if(sValueInTb==sValueInTxt){
                tb.tBodies[0].rows[i].style.background = ‘red‘;
            }
            else{
                tb.tBodies[0].rows[i].style.background = ‘‘;
            }
        }
    }

    //试试
    var str = ‘aaa blue‘;
    var arr = str.split(‘ ‘);

    var str2 = ‘aaa is a person‘;
    var sFound = false;
    for(var i=0;i<arr.length;i++){
        if(str2.search(arr[i])!=-1){
            sFound = true;
        }
    }
    alert(sFound);


    //搜索功能（模糊查询）
    var oBtn3 = document.getElementById(‘btn3‘);
    var oTxt2 = document.getElementById(‘txt2‘);
    oBtn3.onclick=function(){
        for(var i=0;i<tb.tBodies[0].rows.length;i++){
            var sValueInTb = tb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
            var sValueInTxt = oTxt2.value.toLowerCase().split(‘ ‘);
            var sFound = false;
            for(var j=0;j<sValueInTxt.length;j++){
                if(sValueInTb.search(sValueInTxt[j])!=-1){
                    sFound = true;
                    break;
                }    
            }
            if(sFound){
                tb.tBodies[0].rows[i].style.background = ‘red‘;
            }
            else{
                tb.tBodies[0].rows[i].style.background = ‘‘;
            }
            
        }
    }

}
</script>
</head>

<body>
    <input type="text" id="txt1">
    <input type="button" id="btn1" value="添加">
    <input type="text" id="txt2">
    <input type="button" id="btn2" value="精确搜索"><input type="button" id="btn3" value="模糊搜索">
    <table border="1" width="450" id="tb">
        <thead>
            <Tr>
                <Td>ID</Td>
                <Td>姓名</Td>
                <Td>操作</Td>
            </Tr>
        </thead>
        <tbody>
            <tr>
                <Td>1</Td>
                <Td>abe</Td>
                <Td></Td>
            </tr>
            <tr>
                <Td>2</Td>
                <Td>a春春</Td>
                <Td></Td>
            </tr>
            <tr>
                <Td>3</Td>
                <Td>b一流</Td>
                <Td></Td>
            </tr>
            <tr>
                <Td>4</Td>
                <Td>贰万</Td>
                <Td></Td>
            </tr>
            <tr>
                <Td>5</Td>
                <Td>aaa</Td>
                <Td></Td>
            </tr>
            <tr>
                <Td>6</Td>
                <Td>blue</Td>
                <Td></Td>
            </tr>
        </tbody>
    </table>
</body>
</html>