[AppleScript] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table {
width: 500px;
margin: 50px auto;
border: 1px solid #000;
border-collapse: collapse;
}
thead {
text-align: center;
}
table tr {
height: 40px;
background-color: orange;
}
table td {
border: 1px solid #000;
}
tbody td {
padding: 0 10px;
}
table a {
float: right;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>姓名</td>
<td>类别</td>
<td>分数</td>
<td>操作</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 动态生成表格
// 思想：利用数组的长度来创建表格的行数
// 利用数组内对象的属性长度来创建列 创建列的同时进行赋值
var dates = [
{
name: '张飒',
type: 'javascript',
score: 90
}, {
name: '李四',
type: 'javascript',
score: 80
}, {
name: "王二",
type: 'java',
score: 98
}, {
name: "王二",
type: 'java',
score: 98
}
];
var tbodys = document.querySelector('tbody');
// 根据dates.length 创建tr
for (var i = 0; i < dates.length; i++) {
// 创建 tr 元素
var trs = document.createElement('tr');
// 添加元素到tbody 内部
tbodys.appendChild(trs);
// 根据dates[i] 对象的属性长度来创建 td
for (var k in dates[i]) {
// 创建 td 元素
var tds = document.createElement("td");
// 将对象的值赋值给td 元素
tds.innerHTML = dates[i][k];
// 将td 添加到 tr 内
trs.appendChild(tds);
}
// 创建操作 单元格
var td = document.createElement('td');
// 给操作单元格 添加内容
td.innerHTML = '<a href="javascript:;">删除</a>';
trs.appendChild(td);
}
// 获取所有 a 元素
var as = document.querySelectorAll('a');
// 循环 注册点击事件;
for (var j = 0; j < as.length; j++) {
as[j].onclick = function () {
tbodys.removeChild(this.parentNode.parentNode); //移除a 元素的爷爷即：当前a 所在的tr
}
}
</script>
</body>
</html> | 
收藏
淘帖
踩
