<script>
        window.onload=function(){
            /*隔行显示背景色**/
            var oTab= document.getElementById("tab1");
            var oldColor = "";
            for(var i=0; i<oTab.tBodies[0].rows.length;i++){
                oTab.tBodies[0].rows[i].onmouseover=function(){
                    oldColor=this.style.background;
                    this.style.background="green";  
                };
                oTab.tBodies[0].rows[i].onmouseout=function(){
                    this.style.background=oldColor; 
                }
                if(i%2==0){
                    oTab.tBodies[0].rows[i].style.background="gray";
                }else{
                    oTab.tBodies[0].rows[i].style.background="blue";
                }

            }

            /**添加记录*/
            var oName = document.getElementById("name");
            var oAge = document.getElementById("age");
            var oBtn = document.getElementById("btn");
            var id=oTab.tBodies[0].rows.length+1;
            oBtn.onclick=function(){
                var oTr = document.createElement("tr");

                var oTd = document.createElement("td");
                oTd.innerHTML=id++;
                oTr.appendChild(oTd);

                var oTd = document.createElement("td");
                oTd.innerHTML=oName.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement("td");
                oTd.innerHTML=oAge.value;
                oTr.appendChild(oTd);

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

                oTd.getElementsByTagName("a")[0].onclick=function(){
                        oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                };
                oTab.tBodies[0].appendChild(oTr);
            }

            /*多关键词搜索*/
            var Search = document.getElementById("search");
            var oBtn1 = document.getElementById("btn1");
            oBtn1.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=Search.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';
                        }
                    }
                }
            }

            /*排序*/
            var oSort = document.getElementById("sort1");
            oSort.onclick=function(){
                var arr = [];
                for(var i=0; i<oTab.tBodies[0].rows.length;i++){
                    arr[i] = oTab.tBodies[0].rows[i];
                }
                arr.sort(function(tr1,tr2){
                    var n1=parseInt(tr1.cells[0].innerHTML);
                    var n2=parseInt(tr2.cells[0].innerHTML);
                    return n1-n2;
                });
                for(var i=0; i<arr.length;i++){
                    oTab.tBodies[0].appendChild(arr[i]);
                }
            }
        };
    </script>

<body>
<div>
姓名：<input type="text" id="name">
年龄：<input type="text" id="age">
<input type="button" value="添加" id="btn"><br>
<input type="text" id="search">
<input type="button" value="搜索" id="btn1">
<input type="button" value="排序" id="sort1">
    <table border="1" id="tab1" width="400">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </thead>
        <tbody>
            <tr>
                <td>5</td>
                <td>Blue</td>
                <td>29</td>
            </tr>
            <tr>
                <td>4</td>
                <td>张三</td>
                <td>32</td>
            </tr>
            <tr>
                <td>3</td>
                <td>李四</td>
                <td>21</td>
            </tr>
            <tr>
                <td>2</td>
                <td>王五</td>
                <td>43</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
赏
相关评论(0)
您是不是忘了说点什么？

友情提示：垃圾评论一律封号...

还没有评论，快来抢沙发吧！