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
}, {
html表格元素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 = ateElement('tr');
tbody.appendChild(tr);
for (var k in stus[i]) { //对假数据进⾏遍历
var td = ateElement('td'); //新建td
td.innerHTML = stus[i][k]; //将对象数据写进td中
tr.appendChild(td);
}
//删除按钮的建⽴
var td = ateElement('td');
td.innerHTML = '删除';
tr.appendChild(td);
}
//对a标签进⾏点击事件
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
//this.parentNode是a标签的⽗亲td， .parentNode是td的夫亲tr。
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。