一段简单的利用js来增加或删除表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<script type="text/javascript">
var arr = [
{
name: 'Jack',
age: 18,
gender: '男'
},{
name: 'Rose',
age: 20,
gender: '女'
},{
name: 'Tom',
age: 22,
gender: '男'
}
]
var tbody = document.querySelector("tbody");
for(var i=0;i<arr.length;i++){
var tr = document.createElement("tr");
for(var j in arr[i]){
var td = document.createElement("td");
td.innerText = arr[i][j]
tr.appendChild(td)
}
var td = document.createElement("td");
td.innerText = '删除';
tr.appendChild(td)
tbody.appendChild(tr)
}
var tds = document.querySelectorAll("td:last-child");
for(var i=0;i<tds.length;i++){
tds[i].onclick = function(){
// console.log(this); - 要删除的就是td所在tr
console.log(this.parentElement);
this.parentElement.parentElement.removeChild(this.parentElement)
}
}
</script>
</html>
1271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
