JavaScript之动态生成表格
2019-06-04 本文已影响0人
李寻欢_
整体思路:
1.将每一行的数据作为一个对象,然后将这些对象封装在一个数组中;
2、添加行tr,利用for循环(i的数量与数组的长度有关);
3、内层for循环,创建每一行中的所有单元格td,单元格td的数量与对象中的属性个数有关,故用for...in...遍历对象即可
4、在每一行的最后,添加一个td,内容为a标签‘删除’;
5、最后给表格添加一个点击‘删除’后就删除整行的事件
以上,整个表格就创建完成了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 1.将每一行的数据作为一个对象,然后将这些对象封装在一个数组中(没有后台服务器的情况下,暂时采用这种方式添加)
var datas = [{
name: '李寻欢',
subject: 'javascript',
scores: 100
}, {
name: '周杰伦',
subject: 'javascript',
scores: 99
}, {
name: '陈奕迅',
subject: 'javascript',
scores: 98
}, {
name: '昼夜',
subject: 'javascript',
scores: 97
}, {
name: '柯南',
subject: 'javascript',
scores: 100
}]
// 2、添加行tr,利用for循环(i的数量与数组的长度有关)
// 获取元素
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) {
//创建行tr
var tr = document.createElement('tr');
//将新创建的行tr添加给tbody
tbody.appendChild(tr);
// 3、内层for循环,创建每一行中的所有单元格td,单元格td的数量与对象中的属性多少有关,故用for...in...
for (var k in datas[i]) {
// 创建td元素
var td = document.createElement('td');
// 将每个对象中的属性值传给td
td.innerHTML = datas[i][k];
//给tr添加td子元素
tr.appendChild(td);
}
//4、在每一行的最后,添加一个td,内容为a标签‘删除’
// 创建td新元素
var td = document.createElement('td');
//把a标签的‘删除’传给td
td.innerHTML = "<a href='javascript:;'>删除</ a>";
// 给tr添加上td
tr.appendChild(td);
}
//以上,整个表格就创建完成了
// 5、下面给表格添加点击‘删除’,就删除整行的事件
// 获取元素
var as = document.querySelectorAll('a');
// 添加事件
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
打开浏览器后,效果如图1:
动态生成表格效果图-1.png
点击删除任意一行,效果如图2,3,4
动态生成表格效果图-2.png
动态生成表格效果图-3.png
动态生成表格效果图-4.png