表格的DOM操作 – 源码巴士

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的添加和删除</title>
    <script type="text/javascript">
    window.onload=function(){
        var oTab = document.getElementById('tab1');
        var oName = document.getElementById('name');
        var oAge = document.getElementById('age');
        var oBtn = document.getElementById('btn1');
        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);
        };
    };
    </script>
</head>
<body>
    姓名：<input type="text" id="name">
    年龄：<input type="text" id="age">
    <input type="button" id="btn1" value="添加">
    <table id="tab1" border="1px" width="666px">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张一</td>
                <td>18</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>李二</td>
                <td>19</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>王三</td>
                <td>20</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>朱四</td>
                <td>21</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td>刘五</td>
                <td>22</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

1、通过innerHTMl将输入框内的内容导入到td中，并利用appendChild方法将新增加的内容添加到tr中实现对表格内容的添加。
2、编号会依次递增，不会因为删除了某些子节点后导致编号混乱。

//表格的搜索
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(' ');//用1个空格分隔开 构建数组

                oTab.tBodies[0].rows[i].style.background='';//.display='none'

                for (var j = 0; j < arr.length; j++) {
                    if (sTab.search(arr[j])!=-1) {
                        oTab.tBodies[0].rows[i].style.background='yellow';
                        //.display='block'
                    }
                }
            };
        }

1.首先将input中的内容提取出来并都用toLowerCase变为小写，然后导入到数组中。并通过split用空格分开，并且将所有行的样式变为空，在用循环search是否等于-1进行判断预支是否对应，并将对应时多对应的行数变为黄色。

oBtn.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]);
            }
        };

1.先把每个id输入创建的数组中，然后用sort方法对数组进行排序，再用循环将数组的每个数值添加到body中就完成了排序。

//单行变色，并且高亮提示。
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;//先将颜色存于oldColor中，
                this.style.background='yellow';
            };
            oTab.tBodies[0].rows[i].onmouseout=function()
            {

                this.style.background=oldColor;
            };
            if(i%2){
                oTab.tBodies[0].rows[i].style.background='';
            }else{
                oTab.tBodies[0].rows[i].style.background='#CCC';
            }
        }
    };

原文链接：https://blog.csdn.net/zhaoke_930325/article/details/75659841