HTML + CSS + JavaScript 实现简单的动态表格

要求

添加一个学生信息表格，表格的信息有编号、姓名、性别三个字段，可以随意向表格中添加学生信息、删除学生信息。

步骤分析

1. 定义可以向表格中添加信息的文本框和一个添加按钮
2. 定义一个表格
3. 给添加按钮绑定点击事件
4. 获取文本框的内容
5. 创建单元格，设置单元格的内容为文本框内容
6. 创建表格行
7. 将单元格添加到表格行中
8. 获取表格对象，将表格行添加到表格中去
9. 定义删除信息的方法

步骤实现

1. 定义三个文本框 + 一个添加按钮

   <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>

   效果如下：
   

2. 使用CSS，对div标签进行描述：将三个文本框和一个按钮，中心对齐，边沿长度为50个像素点

   div{
       text-align: center;
       margin: 50px;
   }

   效果如下：
   

3. 定义一个表格

   <table>
       <!-- 表格标题 -->
       <caption>学生信息表</caption>
       <!-- 表格第一行：表格表头 -->
       <tr>
           <th>编号</th>
           <th>姓名</th>
           <th>性别</th>
           <th>操作</th>
       </tr>
   
       <!-- 表格第二行：学生信息2 -->
       <tr>
           <td>1</td>
           <td>令狐冲</td>
           <td>男</td>
           <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
           <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
       </tr>
   
       <!-- 表格第三行：学生信息2 -->
       <tr>
           <td>2</td>
           <td>任我行</td>
           <td>男</td>
           <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
           <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
       </tr>
   
       <!-- 表格第四行：学生信息3 -->
       <tr>
           <td>3</td>
           <td>岳不群</td>
           <td>?</td>
           <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
           <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
       </tr>
   </table>

   效果如下：
   

4. 通过CSS，对表格进行描述：表格居中，为表格创建一个方框（方框宽度为500px），方框自动向中对齐三个文本框和一个按钮

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

   效果如下：
   

5. 通过CSS，对表格中的行、单元格进行描述：文本信息向中对齐，每个单元格添加一个方框

   td,th{
       text-align: center;
       border: 1px solid;
   }

   效果如下：
   

6. 通过JavaScript：获取添加按钮对象

   // 1.获取按钮
   var btn_add = document.getElementById("btn_add"); 

7. 通过JavaScript：获取文本框对象，然后通过其对象获取文本框内容

   // 2.1 获取文本框对象
   var idObject = document.getElementById("id");
   var nameObject = document.getElementById("name");
   var genderObject = document.getElementById("gender");
   // 2.2 获取文本框的内容
   var id = idObject.value;
   var name = nameObject.value;
   var gender = genderObject.value;

8. 通过JavaScript：定义创建表格单元格的HTML

   //3.创建单元格，赋值单元格的标签体
   // id 的单元格
   var td_id = document.createElement("td");              // 创建单元格
   var text_id = document.createTextNode(id);             // 赋值给单元格的标签体
   td_id.appendChild(text_id);
   // name 的单元格
   var td_name = document.createElement("td");
   var text_name = document.createTextNode(name);
   td_name.appendChild(text_name);
   //gender 的单元格
   var td_gender = document.createElement("td");
   var text_gender = document.createTextNode(gender);
   td_gender.appendChild(text_gender);
   // a标签的单元格
   var td_a = document.createElement("td");
   var ele_a = document.createElement("a");
   ele_a.setAttribute("href","javascript:void(0);");
   ele_a.setAttribute("onclick","delTr(this);");
   var text_a = document.createTextNode("删除");
   ele_a.appendChild(text_a);                         // 为a标签写入文本内容："删除"
   td_a.appendChild(ele_a);                           // 为td标签添加子标签（a标签）

9. 通过JavaScript：定义创建表格行的HTML，将要被创建的单元格添加到表格行

    // 4.创建表格行
    var tr = document.createElement("tr");
    // 5.添加单元格到表格行中
    tr.appendChild(td_id);
    tr.appendChild(td_name);
    tr.appendChild(td_gender);
    tr.appendChild(td_a);

10. 通过JavaScript：获取表格对象，将定义好的表格行，添加到表格中

     // 6.获取table
     var table = document.getElementsByTagName("table")[0];
     table.appendChild(tr);

11. 通过JavaScript：定义删除表格行信息的方法

    // 删除方法
    function delTr(obj) {
        // 获取table节点
        var table = obj.parentNode.parentNode.parentNode;
        // 获取te节点
        var tr = obj.parentNode.parentNode;
        // 删除（并返回）当前节点的指定子节点。
        table.removeChild(tr);
    }

具体实现代码如下

<!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块标签，在该块标签中添加三个输入信息（编号、姓名、性别）的框框、一个确认添加的按钮（添加）-->
<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>
    <!-- 表格标题 -->
    <caption>学生信息表</caption>
    <!-- 表格第一行：表格表头 -->
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <!-- 表格第二行：学生信息2 -->
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
    </tr>

    <!-- 表格第三行：学生信息2 -->
    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
    </tr>

    <!-- 表格第四行：学生信息3 -->
    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="deleteTr(this);" >删除</a></td>
    </tr>
</table>

<script>
    // 1.获取按钮
    var btn_add = document.getElementById("btn_add");
    btn_add.onclick = function() {
        // 2.1 获取文本框对象
        var idObject = document.getElementById("id");
        var nameObject = document.getElementById("name");
        var genderObject = document.getElementById("gender");
        // 2.2 获取文本框的内容
        var id = idObject.value;
        var name = nameObject.value;
        var gender = genderObject.value;

        //3.创建单元格，赋值单元格的标签体
        // id 的 单元格
        var td_id = document.createElement("td");              // 创建单元格
        var text_id = document.createTextNode(id);             // 赋值给单元格的标签体
        td_id.appendChild(text_id);
        // name 的 单元格
        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        //gender 的 单元格
        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        // a标签的单元格
        var td_a = document.createElement("td");
        var ele_a = document.createElement("a");
        ele_a.setAttribute("href","javascript:void(0);");
        ele_a.setAttribute("onclick","delTr(this);");
        var text_a = document.createTextNode("删除");
        ele_a.appendChild(text_a);                         // 为a标签写入文本内容："删除"
        td_a.appendChild(ele_a);                           // 为td标签添加子标签（a标签）

        // 4.创建表格行
        var tr = document.createElement("tr");
        // 5.添加单元格到表格行中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        // 6.获取table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
    };

    // 删除方法
    function deleteTr(object) {
        // 获取table节点
        var table = object.parentNode.parentNode.parentNode;
        // 获取te节点
        var tr = object.parentNode.parentNode;
        // 删除（并返回）当前节点的指定子节点。
        table.removeChild(tr);
    }


</script>

</body>
</html>

最终效果如下：可以删除信息，也可以添加信息

也可以使用innerHTML进行添加数据，步骤类似上面所述

<!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块标签，在该块标签中添加三个输入信息（编号、姓名、性别）的框框、一个确认添加的按钮（添加）-->
<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>
    <!-- 表格标题 -->
    <caption>学生信息表</caption>
    <!-- 表格第一行：表格表头 -->
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <!-- 表格第二行：学生信息2 -->
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
    </tr>

    <!-- 表格第三行：学生信息2 -->
    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
    </tr>

    <!-- 表格第四行：学生信息3 -->
    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="javascript:void(0);" onclick="deleteTr(this);" >删除</a></td>
    </tr>
</table>

<script>
    // 使用innerHTML添加
    document.getElementById("btn_add").onclick = function() {
        // 获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        // 获取table
        var table = document.getElementsByTagName("table")[0];

        // 追加一行
        table.innerHTML += "<tr>
" +
            "        <td>"+id+"</td>
" +
            "        <td>"+name+"</td>
" +
            "        <td>"+gender+"</td>
" +
            "        <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
" +
            "    </tr>";
    };

    // 删除方法
    function deleteTr(object) {
        // 获取table节点
        var table = object.parentNode.parentNode.parentNode;
        // 获取te节点
        var tr = object.parentNode.parentNode;
        // 删除（并返回）当前节点的指定子节点。
        table.removeChild(tr);
    }

</script>

</body>
</html>