js動態表格

 

用js實現動態增長表格行數。

 

html：

    <table>
        <thead>
            <tr>
                <td>學號</td>
                <td>姓名</td>
                <td>操做</td>
            </tr>
        </thead>
        <tbody id="body"></tbody>
    </table>
    <button onclick="add()">添加一行</button>

 

 css：

    <style>
        table{
            border: solid 1px #000000;
        }
        td{
            width: 100px;
            border: solid 1px #000000;
        }
    </style>

 

js：

    <script>
        //新增
        var num = 1;
        function add(){
            var TR  = document.createElement("trr");
            var tdNum = document.createElement("td");
            var tdName = document.createElement("td");
            var tdOpr = document.createElement("td");

            tdNum.innerHTML = "00" + num;
            tdName.innerHTML = "name" + num;
            tdOpr.innerHTML = '<a href="javascript:" onclick="del(this)">刪除</a>';

            var body = document.getElementById("body");
            body.appendChild(TR);
            TR.appendChild(tdNum);
            TR.appendChild(tdName);
            TR.appendChild(tdOpr);
            bgCha(TR)
            num++;
        }

        //刪除
        function del(obj){
            var parNode = obj.parentNode.parentNode.parentNode;
            parNode.removeChild(parNode.childNodes[0]);
        }

        //顏色
        function bgCha(obj){
            obj.onmouseover = function () {
                obj.style.backgroundColor = "red";
            };
            obj.onmouseout = function(){
                obj.style.backgroundColor = "#fff";
            }
        }
    </script>

 

效果如圖：