要求
添加一个学生信息表格，表格的信息有编号、姓名、性别三个字段，可以随意向表格中添加学生信息、删除学生信息。
步骤分析
- 定义可以向表格中添加信息的文本框和一个添加按钮
- 定义一个表格
- 给添加按钮绑定点击事件
- 获取文本框的内容
- 创建单元格，设置单元格的内容为文本框内容
- 创建表格行
- 将单元格添加到表格行中
- 获取表格对象，将表格行添加到表格中去
- 定义删除信息的方法
步骤实现
- 定义三个文本框 + 一个添加按钮
<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>
效果如下：
- 使用CSS，对div标签进行描述：将三个文本框和一个按钮，中心对齐，边沿长度为50个像素点
div{ text-align: center; margin: 50px; }
效果如下：
- 定义一个表格
<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>
效果如下：
- 通过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); }
具体实现代码如下
<!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>\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>