javascript案例|javascript小案例-----动态生成删除表格 javascript|css|html|html5|前端

效果如下:

文章图片

代码思路:

因为里面的学生数据都是动态的,需要js动态生成,这里我们模拟数据,自己定义好数据,数据采取对象形式存储

所有的数据都是存放在tbody里面

因为行很多,我们需要循环常见多个行(对应着有多少人)

最后一列单元格是删除,需要单独创建单元格

创建行-->创建单元格-->创建删除单元格

html部分:

姓名科目分数操作

css部分:

table { width: 520px; margin: 100px auto; border-collapse: collapse; text-align: center; }th, td { border: 1px solid #333; }thead tr { height: 40px; background-color: #ccc; }

javascript部分:
分为4部分:
1.先准备好学生数据 ,用数组存放对象
2.在tbody里面创建行,有几个人就创建几行(通过数组长度得到)
3.行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数
4.创建有删除元素的单元格

//1.先准备好学生数据 ,用数组存放对象 var data = https://www.it610.com/article/[{ name:'派大星', subject: 'javascript', score: 100 }, { name: '蟹老板', subject: 'javascript', score: 80 }, { name: '章鱼哥', subject: 'javascript', score: 98 }, { name: '海绵宝宝', subject: 'javascript', score: 86 }, { name: '痞老板', subject: 'javascript', score: 30 }]; //2.在tbody里面创建行,有几个人就创建几行(通过数组长度得到) var tbody = document.querySelector("tbody"); for (var i = 0; i < data.length; i++) { //1.创建行数 var tr = document.createElement("tr"); tbody.appendChild(tr); //2.在行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数 for (var k in data[i]) { //用for in遍历数组中的对象 //创建单元格 td var td = document.createElement("td"); //把对象里面的属性值给 td td.innerHTML = data[i][k]; tr.appendChild(td); } // 3.创建有删除元素的单元格 var td = document.createElement("td"); td.innerHTML = '删除' tr.appendChild(td) }//4.删除操作开始 var as = document.querySelectorAll("a"); for (var i = 0; i < as.length; i++) { as[i].onclick = function () { //点击a删除a所在的行(a的父元素(td)的父元素(tr))node,removeChild(child) tbody.removeChild(this.parentNode.parentNode) } }