javascript中利用innerHTML制作简易的动态表格

本文链接：https://blog.csdn.net/u010658676/article/details/98883260

html代码以及css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


    <table id="table">
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>1</td>
            <td>某某某</td>
            <td>男</td>
            /*这里使用a标签是点击用途而不是超链接 并把点击绑定删除的事件 
              this代表的当前设置onclick属性的对象 即a标签*/
            <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td> 
        </tr>
        
    </table>

</body>
</html>

script代码

<script>
        //1.获取按钮对象 并绑定添加按钮的事件
    document.getElementById("btn_add").onclick = function() {
        //2.获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //3.获取table标签
        var table = document.getElementById("table");

        //4.追加一行
        table.innerHTML += "<tr>\n" +
            "<td>"+id+"</td>\n" +
            "<td>"+name+"</td>\n" +
            "<td>"+gender+"</td>\n" +
            //
            "<td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\" >删除</a></td>\n" +
            "</tr>";
    }
    //5.编写删除的事件
    //传入a标签对象 
    function delTr(obj){
        //通过a标签的三次父类节点找到table标签 <a> → <td> → <tr> → <table>
        var table = obj.parentNode.parentNode.parentNode; 
        //通过a标签的两次父类节点找到tr标签 <a> → <td> → <tr>
        var tr = obj.parentNode.parentNode;
        //在table标签中移除子标签tr
        table.removeChild(tr);
    }
</script>