使用JavaScript动态创建表格:
效果图:
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box table {
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
// 定义一个对象用来模拟数据
var datas = [{
name: '张三',
subject: '语文',
score: 135
}, {
name: '李四',
subject: '数学',
score: 125
}, {
name: '王五',
subject: '英语',
score: 130
}, {
name: '孙二',
subject: '物理',
score: 80
}, {
name: '张三丰',
subject: '化学',
score: 60
}, {
name: '王小二',
subject: '生物',
score: 80
}];
// 表头数据
var headDatas = ['姓名', '科目', '成绩', '操作'];
// 获取页面中的box属性
var box = document.getElementById('box')
// 1 创建table 元素
var table = document.createElement('table')
// 设置table的样式
table.border = '1px'
table.width = '600px'
// 将table放在box后的节点
box.appendChild(table)
// 2 创建表头
var thead = document.createElement('thead')
// 遍历头部数据
for (var i = 0; i < headDatas.length; i++) {
// 创建th
var th = document.createElement('th')
// 设置th的样式
th.style.height = '50px'
th.style.backgroundColor = 'lightgray'
// 将 headDatas里面的数据插入th中
th.innerText = headDatas[i]
// 将th放在 thead后的节点
thead.appendChild(th)
}
// 将thead放在table后的节点
table.appendChild(thead)
// 3 创建数据行
var tbody = document.createElement('tbody')
// 遍历数据datas
for (var i = 0; i < datas.length; i++) {
// 创建tr
var tr = document.createElement('tr')
// 使用for in遍历对象
for (var k in datas[i]) {
// console.log(datas[i][k])
var td = document.createElement('td')
td.style.height = '30px'
td.style.textAlign = 'center'
td.innerText = datas[i][k]
tr.appendChild(td)
}
// 生成删除对应的列
var deltd = document.createElement('td')
deltd.style.textAlign = 'center'
var del = document.createElement('a')
del.innerText = '删除'
del.href = 'javascript:;'
deltd.appendChild(del)
tr.appendChild(deltd)
tbody.appendChild(tr)
// 删除的超链接
del.onclick = delFn
}
table.appendChild(tbody)
function delFn() {
// console.log(this.parentNode.parentNode)
this.parentNode.parentNode.remove()
}
</script>
</body>
</html>