动态生成表格

最新推荐文章于 2024-07-20 23:55:03 发布

zrzzzzzzzzzzzz

最新推荐文章于 2024-07-20 23:55:03 发布

阅读量37

点赞数

文章标签： java

本文链接：https://blog.csdn.net/zrzzzzzzzzzzzz/article/details/124407645

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}

td,
th {
border: 1px solid #333;
}
</style>
<body>
<table>
<thead>
<td>角色</td>
<td>法术</td>
<td>法力</td>
<td>操作</td>
</thead>
<tbody>

</tbody>
</table>
<script>
var dates= [{
name: '闻人翊悬',
magic: '火系',
main: 100
},
{
name: '公仪楚人',
magic: '土系',
main: 80
},
{
name: '申屠子夜',
magic: '水系',
main: 80
},
{
name: '容成墨熙',
magic: '木系',
main: 90
},
{
name: '轩辕神君',
magic: '金系',
main: 100
},];
var tbody=document.querySelector('tbody');
for(var i=0;i<dates.length;i++)
{
var tr=document.createElement('tr');
tbody.append(tr);
for(var k in dates[i])
{
var td=document.createElement('td');
td.innerHTML=dates[i][k];
tr.appendChild(td);
}
var td=document.createElement('td');
var del=document.createElement('a');
del.innerHTML='删除';
del.οnclick=function(){
tbody.removeChild(this.parentNode.parentNode);
}
td.appendChild(del);
tr.appendChild(td);
}

</script>
</body>
</html>

zrzzzzzzzzzzzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态生成表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: c...
复制链接

扫一扫