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

2023-11-20 14:57| 来源: 网络整理| 查看: 265

要求

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

步骤分析定义可以向表格中添加信息的文本框和一个添加按钮定义一个表格给添加按钮绑定点击事件获取文本框的内容创建单元格，设置单元格的内容为文本框内容创建表格行将单元格添加到表格行中获取表格对象，将表格行添加到表格中去定义删除信息的方法步骤实现

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

效果如下：

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

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

效果如下：

定义一个表格

学生信息表编号姓名性别操作 1 令狐冲男删除 2 任我行男删除 3 岳不群 ? 删除

效果如下：

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

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

效果如下：

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

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

效果如下：

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

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

通过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;

通过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标签）

通过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);

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

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

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

// 删除方法 function delTr(obj) { // 获取table节点 var table = obj.parentNode.parentNode.parentNode; // 获取te节点 var tr = obj.parentNode.parentNode; // 删除（并返回）当前节点的指定子节点。 table.removeChild(tr); } 具体实现代码如下动态表格 table{ border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } 学生信息表编号姓名性别操作 1 令狐冲男删除 2 任我行男删除 3 岳不群 ? 删除 // 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); }

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

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

动态表格 table{ border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } 学生信息表编号姓名性别操作 1 令狐冲男删除 2 任我行男删除 3 岳不群 ? 删除 // 使用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 += "\n" + " "+id+"\n" + " "+name+"\n" + " "+gender+"\n" + " 删除\n" + " "; }; // 删除方法 function deleteTr(object) { // 获取table节点 var table = object.parentNode.parentNode.parentNode; // 获取te节点 var tr = object.parentNode.parentNode; // 删除（并返回）当前节点的指定子节点。 table.removeChild(tr); }

本文来自博客园，作者：LeeHua，转载请注明原文链接：https://www.cnblogs.com/liyihua/p/12393342.html

【本文地址】

公司简介

联系我们