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>

    效果如下：
    img

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

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

    效果如下：
    img

  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>

    效果如下：
    img

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

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

    效果如下：
    img

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

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

    效果如下：
    img

  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>

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

img

也可以使用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>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" +
            "    </tr>";
    };
 
    // 删除方法
    function deleteTr(object) {
        // 获取table节点
        var table = object.parentNode.parentNode.parentNode;
        // 获取te节点
        var tr = object.parentNode.parentNode;
        // 删除（并返回）当前节点的指定子节点。
        table.removeChild(tr);
    }
 
</script>
 
</body>
</html>
posted @   LeeHua  阅读(23021)  评论(3)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛