表格基础操作 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM高级应用-表格、表单</title>
    <script type="text/javascript">
        function setColor(oTab)
        {
            var oldColor = '';
            for(var i=0; i<oTab.tBodies[0].rows.length;i++)
            {
                if(i % 2)
                {
                    oTab.tBodies[0].rows[i].style.background = '';
                }
                else
                {
                    oTab.tBodies[0].rows[i].style.background = 'red';
                }
            }//for
        }
        window.onload = function () {
            var oTab = document.getElementById('tab1');
            //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[0].innerHTML);
            //alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
            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;
                };
            }//for
            setColor(oTab);
            for(var j=0;j<oTab.tBodies[0].rows.length;j++)
            {
                var oA = oTab.tBodies[0].rows[j].cells[3].getElementsByTagName('a')[0];
                oA.onclick=function(){
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                    setColor(oTab);
                };

            }
            //添加
            var oTxt1 = document.getElementById('txt01');
            var oTxt2 = document.getElementById('txt02');
            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++;
                //oTd.innerHTML = 'llooooll';
                oTr.appendChild(oTd);
                oTd = document.createElement('td');

                oTd.innerHTML = oTxt1.value;
                oTr.appendChild(oTd);
                oTd = document.createElement('td');

                oTd.innerHTML = oTxt2.value;
                oTr.appendChild(oTd);
                oTd = document.createElement('td');

                oTd.innerHTML = '<a href="javascript:;">delete</a>';
                oTr.appendChild(oTd);
                oTd.getElementsByTagName('a')[0].onclick=function(){
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                    setColor(oTab);
                };
                oTab.tBodies[0].appendChild(oTr);
                setColor(oTab);

            };
            //搜索
            var oTxt3 = document.getElementById('txt03');
            var oBtn2 = document.getElementById('btn2');
            oBtn2.onclick = function(){
                setColor(oTab);
                var flag = false;
                for(var k = 0;k<oTab.tBodies[0].rows.length;k++)
                {
                    var sTab = oTab.tBodies[0].rows[k].cells[1].innerHTML;
                    if( sTab.toLowerCase() == oTxt3.value.toLowerCase())
                    {
                        oTab.tBodies[0].rows[k].style.background = 'blue';
                        flag = true;
                    }
                }
                if(!flag)
                {
                    alert('not find!')

                }
            };
            //模糊搜索
            //var str = '1231231';
            //return str.search('23');//找到并返回子串出现位置，如果未找到返回-1
            var oTxt4 = document.getElementById('txt04');
            var oBtn3 = document.getElementById('btn3');
            oBtn3.onclick = function(){
                setColor(oTab);
                var flag = false;
                for(var k = 0;k<oTab.tBodies[0].rows.length;k++)
                {
                    var sTab = oTab.tBodies[0].rows[k].cells[1].innerHTML;
                    if( sTab.toLowerCase().search(oTxt4.value.toLowerCase()) != -1)
                    {
                        oTab.tBodies[0].rows[k].style.background = 'blue';
                        flag = true;
                    }
                }
                if(!flag)
                {
                    alert('not find!')
                }
            };
            //搜索多关键字
            //var str = '1231 guo 汽车';
            //str.aplit(' ');
            //var str = '1231,guo,汽车';
            //str.aplit(',');
            var oTxt4 = document.getElementById('txt04');
            var oBtn3 = document.getElementById('btn3');
            oBtn3.onclick = function(){
                setColor(oTab);
                var flag = false;
                for(var k = 0;k<oTab.tBodies[0].rows.length;k++)
                {
                    var sTab = oTab.tBodies[0].rows[k].cells[1].innerHTML;
                    var sTxt = oTxt4.value.toLowerCase();
                    var arr = sTxt.split(' ');
                    for(var i =0; i< arr.length;i++)
                    {
                        if( sTab.toLowerCase().search(arr[i]) != -1)
                        {
                            oTab.tBodies[0].rows[k].style.background = 'blue';
                            flag = true;
                        }
                    }
                }
                if(!flag)
                {
                    alert('not find!')
                }
            };
            //利用数组sort（）方法排序
            var oBtn4 = document.getElementById('btn4');
            oBtn4.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>
</head>
<body>
第二项: <input id="txt01" type="text"/>
第三项: <input id="txt02" type="text"/>
<input id="btn" type="button" value="add"/>
<hr/>
item02 search: <input id="txt03" type="text"/>
<input id="btn2" type="button" value="search"/>
<hr/>
item02 模糊搜索: <input id="txt04" type="text"/>
<input id="btn3" type="button" value="模糊搜索"/>
<hr/>
<input id="btn4" type="button" value="sort"/>
<hr/>
<table id="tab1" border="2" width="600">
    <thead>
    <tr>
        <td>item01</td>
        <td>item02</td>
        <td>item03</td>
        <td>itemOX</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>11</td>
        <td>123123</td>
        <td>31231</td>
        <td><a href="javascript:;">delete</a></td>
    </tr>
    <tr>
        <td>23</td>
        <td>adasd</td>
        <td>adasd</td>
        <td><a href="javascript:;">delete</a></td>
    </tr>
    <tr>
        <td>24</td>
        <td>asd</td>
        <td>adas</td>
        <td><a href="javascript:;">delete</a></td>
    </tr>
    <tr>
        <td>6</td>
        <td>adsasd</td>
        <td>adasd</td>
        <td><a href="javascript:;">delete</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>adsad</td>
        <td>adasd</td>
        <td><a href="javascript:;">delete</a></td>
    </tr>
    </tbody>
</table>
</body>
</html>

 

posted @ 2017-11-22 10:29  我将枕中记忆抹去任岁月浮光掠影  阅读(189)  评论(0)  编辑  收藏  举报