在html中生成动态表格数据,JavaScript实现网页动态生成表格

JavaScript(JS)网页–动态生成表格，供大家参考，具体内容如下

在网页中，动态生成列表的内容，将数组中的object加入到列表中(没学到数据库)。在HTML中创建thead，然后通过JavaScipt动态生成tbody。并且在每行最后申城一个单元格，加入删除操作，点击删除可以删除此行。

动态生成表格

table {

border-collapse: collapse;

margin-top: 200px;

margin-left: 500px;

}

table th{

border: 1px solid black;

width: 80px;

height: 40px;

text-align: center;

background-color: cornsilk;

}

table td{

border: 1px solid black;

width: 80px;

height: 40px;

text-align: center;

}

姓名科目成绩操作

//加入数据

var datas = [

{

name:'张三',

subject:'JavaScript',

score:'100'

},

{

name:'李四',

subject:'JavaScript',

score:'95'

},

{

name:'王五',

subject:'JavaScript',

score:'98'

},

{

name:'赵六',

subject:'JavaScript',

score:'92'

}

];

//创建行，有几个人就创建几行

var tbody =document.querySelector('tbody')

for(var i = 0 ; i < datas.length ; i++){

//创建行

var tr = document.createElement('tr');

tbody.appendChild(tr);

//创建单元格

for (var k in datas[i] ){

var td = document.createElement("td");

td.innerText = datas[i][k];

tr.appendChild(td);

}

//创建删除单元格

var td = document.createElement('td');

td.innerHTML = '删除';

tr.appendChild(td);

}

var as = document.querySelectorAll('a');

for (var i = 0 ; i

as[i].onclick = function(){

//点击a 删除当前行

tbody.removeChild(this.parentNode.parentNode);

}

}

// for (var k in Obj){

// k 得到的是属性名

// dbj[k] 得到的是属性值

// }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。