前端小demo——表格增删
Posted yuebanzhou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端小demo——表格增删相关的知识，希望对你有一定的参考价值。
模拟录入成绩系统，对数据在前端页面进行增删。
点击生成表格按钮，自动生成一个表格，这里的数据是写死的。可以进行删除。
点击添加按钮，自动生成一行，在输入框内输入相关内容，点击确定，生成新数据。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> table { text-align: center; } thead td { width: 100px; height: 30px; background: #ccc; } tbody td { height: 25px; } input { width: 70px; height: 20px; } .button { width: 70px; height: 30px; margin: 10px 0 10px 0; } </style> </head> <body> <input type="button" value="生成表格" id="btn" class="button" /> <br/> <div id="dv"> <table border="1" cellpadding="0" cellspacing="0"> <thead> <tr> <td>姓名</td> <td>科目</td> <td>分数</td> <td>操作</td> </tr> </thead> <tbody id="tbd"> </tbody> </table> </div> <input type="button" value="添加" id="btn2" class="button" /> <!-- <script src="common.js"></script> --> <script> function zy$(id) { return document.getElementById(id) }; var arr = [{ "name": "张三", "subject": "语文", "score": "80" }, { "name": "李四", "subject": "数学", "score": "78" }, { "name": "王五", "subject": "英语", "score": "90" } ]; //注册点击事件，生成现有表格 zy$("btn").onclick = function () { //tbody中的内容只出现一次 if (!zy$("tbd").firstElementChild) { //遍历arr for (var i = 0; i < arr.length; i++) { //创建一行 var trObj = document.createElement("tr"); //追加到tbody中 zy$("tbd").appendChild(trObj); //修改ID值 trObj.id = "cc" + i; //创建列 //第一列 var td1 = document.createElement("td"); trObj.appendChild(td1); td1.innerHTML = arr[i].name; //第二列 var td2 = document.createElement("td"); trObj.appendChild(td2); td2.innerHTML = arr[i].subject; //第三列 var td3 = document.createElement("td"); trObj.appendChild(td3); td3.innerHTML = arr[i].score; //第四列 var td4 = document.createElement("td"); trObj.appendChild(td4); //创建a标签 var aObj = document.createElement("a"); td4.appendChild(aObj); //a的跳转地址 aObj.href = "javascript:void(0)"; aObj.innerText = "删除"; //点击删除 aObj.onclick = function () { this.parentNode.parentNode.parentNode. removeChild(this.parentNode.parentNode); }; } } } //注册点击事件，添加 zy$("btn2").onclick = function () { //创建一行 var trObj = document.createElement("tr"); //追加到tbody中 zy$("tbd").appendChild(trObj); //创建列 //一列 var td1 = document.createElement("td"); trObj.appendChild(td1); var input1 = document.createElement("input"); td1.appendChild(input1); //二列 var td2 = document.createElement("td"); trObj.appendChild(td2); var input2 = document.createElement("input"); td2.appendChild(input2); //三列 var td3 = document.createElement("td"); trObj.appendChild(td3); var input3 = document.createElement("input"); td3.appendChild(input3); //四列 var td4 = document.createElement("td"); trObj.appendChild(td4); //a标签确定标签 var aObj = document.createElement("a"); td4.appendChild(aObj); aObj.href = "javascript:void(0)"; aObj.innerText = "确定"; //注册点击事件，确定 aObj.onclick = function () { td1.innerText = input1.value; td2.innerText = input2.value; td3.innerText = input3.value; //点击确定之后，第四列会发生变化 //删除现有第四列 this.parentNode.parentNode.removeChild(this.parentNode); //创建新的第四列 var td4 = document.createElement("td"); trObj.appendChild(td4); //第四列中的内容 var aObj = document.createElement("a"); td4.appendChild(aObj); aObj.innerText = "删除"; aObj.href = "javascript:void(0)"; //删除 aObj.onclick = function () { this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); }; }; //a标签，取消标签 var aObj2 = document.createElement("a"); td4.appendChild(aObj2); aObj2.href = "javascript:void(0)"; aObj2.innerText = "取消"; //注册点击事件，取消 aObj2.onclick = function () { this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); }; }; </script> </body> </html>
以上是关于前端小demo——表格增删的主要内容，如果未能解决你的问题，请参考以下文章