html中循环生成表格数据,动态生成表格(简单实现)

1.案例分析

1.利用对象生成假的数据，用来模拟数据库的数据。

2.核心算法：利用createElement生成表格(生成 tr , td )，注意逻辑关系。

1.css代码

table th {

width: 100px;

height: 50px;

border: 1px solid black;

}

td {

color: green;

text-align: center;

border: 1px solid black;

font-size: 18px;

}

2.html代码

姓名科目成绩操作

3.JavaScript代码

var stus = [{ //假数据

name: '小明',

class: 'JavaScript',

score: 100

}, {

name: '小红',

class: 'JavaScript',

score: 98

}, {

name: '小白',

class: 'JavaScript',

score: 89

}, {

name: '小石',

class: 'JavaScript',

score: 85

}, {

name: '小石',

class: 'JavaScript',

score: 85

}];

//数据写入

var tbody = document.querySelector('tbody'); //找到tbody标签

for (var i = 0; i < stus.length; i++) { //对stus进行循环遍历，并建立tr标签

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

tbody.appendChild(tr);

for (var k in stus[i]) { //对假数据进行遍历

var td = document.createElement('td'); //新建td

td.innerHTML = stus[i][k]; //将对象数据写进td中

tr.appendChild(td);

}

//删除按钮的建立

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

td.innerHTML = '删除';

tr.appendChild(td);

}

//对a标签进行点击事件

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

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

as[i].onclick = function () {

tbody.removeChild(this.parentNode.parentNode);

//this.parentNode是a标签的父亲td， .parentNode是td的夫亲tr。

}

}