制作网页简单学生表格

作者: Android砖家 | 来源:发表于2019-03-01 14:33 被阅读0次

制作网页简单学生表格
前端学习笔记一一HTML表格标签（table）
我的表格说明文档
JS(dom)如何自动的生成表格
3.171.邮箱登录页面（表单课堂作业）
简单网页制作方法，新手一学就会
表格的简单制作
2019-10-22
六、表格（绿叶学习网）
HTML制作简单网页

第一步：首先，我们创建删除函数，并在删除按钮上添加点击事件；
使用removeChild()。

第二步：编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
使用createElement()、innerHTML、appendChild()。

第三步：更改鼠标移动改变背景则可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

获取表格的行，getElementsByTagName 。
使用for进行循环，为每行添加事件及背景颜色设置。

<!DOCTYPE html>

<html>

<head>

    <title> new document </title>

    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>

    <script type="text/javascript">

        window.onload = function () {

            var trArray = document.getElementsByTagName("tr");

            for (var i = 0; i < trArray.length; i++) {

                changeTr(trArray[i]);

            }

        }


        function changeTr(theTr) {

            theTr.onmouseover = function () {
                this.style.backgroundColor = "#f2f2f2";
            }
            theTr.onmouseout = function () {
                this.style.backgroundColor = "#fff";
            }
        }
        var num = 2;
        function addTr() {
            num++;
            var newTr = 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:void(0);' onclick='delTr(this)'>删除</a>";
            newTr.appendChild(xh);
            newTr.appendChild(xm);
            newTr.appendChild(del);
            var tableNode = document.getElementById("table");
            tableNode.appendChild(newTr);
            var tr = document.getElementsByTagName("tr");
            for (var i = 0; i < tr.length; i++){ //重新给新的tr元素添加鼠标移入移出事件
                changeTr(tr[i]);
            }
        }

        function delTr(obj) {
            var pobj = obj.parentNode.parentNode;
            pobj.parentNode.removeChild(pobj);
        }

    </script>
</head>
<body>
<table border="1" width="50%" id="table">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>xh001</td>
        <td>王小明</td>
        <td><a href="javascript:;" onclick="delTr(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

    <tr>
        <td>xh002</td>

        <td>刘小芳</td>

        <td><a href="javascript:;" onclick="delTr(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->

    </tr>


</table>

<input type="button" value="添加一行" onclick="addTr()"/>   <!--在添加按钮上添加点击事件  -->

</body>

</html>