本文实例为大家分享了JavaScript实现动态加载删除表格的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
margin: 100px auto;
width: 500px;
border-collapse: collapse;
}
th {
border: 1px solid gray;
background-color: lightgray;
height: 30px;
}
td {
text-align: center;
border: 1px solid gray;
}
</style>
</head>
<body>
<table>
<thead>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</thead>
<tbody>
</tbody>
</table>
<script>
var tbd = document.querySelector('tbody');
var info = [{
name: 'kathy',
subject: "javascript",
score: 60
}, {
name: 'Milla',
subject: "java",
score: 100
}, {
name: 'kiki',
subject: "python",
score: 80
}, {
name: 'linda',
subject: "jquery",
score: 70
}]
var info_list = [];
for (var i = 0; i < info.length; i++) {
console.log(info[i]['subject']);
var str = "<tr><td>" + info[i]['name'] + "</td>" + "<td>" + info[i]['subject'] + "</td>" + "<td>" + info[i]['score'] + "</td>" + "<td><a href = javascript:;>删除</a></td>" + "</tr>";
info_list.push(str);
}
tbd.innerHTML = info_list.join('');
var deletes = document.querySelectorAll('a');
for (var i = 0; i < deletes.length; i++) {
deletes[i].onclick = function() {
tbd.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- javascript操作向表格中动态加载数据
- Javascript vue.js表格分页，ajax异步加载数据
- vue.js 表格分页ajax 异步加载数据
- Js表格万条数据瞬间加载实现代码
- javascript如何动态加载表格与动态添加表格行
本文由 华域联盟 原创撰写：华域联盟 » JavaScript实现动态加载删除表格
转载请保留出处和原文链接：https://www.cnhackhy.com/57038.htm
