js 处理表格

    <script type="text/javascript">
        window.onload = function () {
            var tr = document.getElementsByTagName("tr");
            for (var i = 0; i < tr.length; i++) {
                bgcChange(tr[i]);
            }
            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
        }
        function bgcChange(obj) {
            obj.onmouseover = function () {
                obj.style.backgroundColor = "#f2f2f2";
            }
            obj.onmouseout = function () {
                obj.style.backgroundColor = "#fff";
            }
        }

        // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
        var num = 0;
        function add() {
            num++;
            var tr = document.createElement("tr");
            var xh = document.createElement("td");
            var xm = document.createElement("td");
            xh.innerHTML = "xh00" + num;//字符串相加
            xm.innerHTML = "第" + num + "学生";//
            var del = document.createElement("td");
            del.innerHTML = "<a href='javascript:;' οnclick='del(this)' >删除</a>";
            var tab = document.getElementById("table");
            tab.appendChild(tr);
            tr.appendChild(xh);
            tr.appendChild(xm);
            tr.appendChild(del);
            var tr = document.getElementsByTagName("tr");
            for (var i = 0; i < tr.length; i++) {
                bgcChange(tr[i]);
            }
        }


        // 创建删除函数
        function del(obj) {
            var tr = obj.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
        }
    </script>
 
<table border="1" width="50%" id="table">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
     
</table>
<input type="button" value="添加一行" οnclick="add()"/>   <!--在添加按钮上添加点击事件  -->