JS数组现存数据生成表格+删除功能

最新推荐文章于 2023-12-02 23:01:08 发布

京都小白

最新推荐文章于 2023-12-02 23:01:08 发布

阅读量470

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_53602804/article/details/128788076

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态生成HTML表格的方法，通过遍历数据对象并利用DOM操作创建表格元素，实现了数据的动态展示。此外，还实现了表格行的删除功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还是运用了节点的关系，所谓的JS生成表格是指不再像最开始一样直接把数据放到html里面，而是直接调用JS函数来调用数据生成表格，可以看到HTML里面只定义了表格的表头和一些基本结构，代码脉络很清晰，以后再翻回来看的时候应该能看懂。

<!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>
  <link rel="stylesheet" href="style.css"> 
</head>
<body>
<table cellspacing="0">
  <thead>
<tr>
  <td>姓名</td>
  <td>科目</td>
  <td>成绩</td>
  <td>操作</td>
</tr>
  </thead>
  <tbody>

  </tbody>
  <tfoot>

  </tfoot>
</table>
  <script src="style.js"></script> 
</body>
</html>

var data=[
    {
    name:'张三',
    subject:'数学',
    score:100,
},
{
    name:'李四',
    subject:'语文',
    score:90,
},
{
    name:'王五',
    subject:'英语',
    score:20,
}];
var tbdy = document.querySelector("tbody");
for(var i=0;i<data.length;i++)
{
    var tr = document.createElement('tr');
    tbdy.appendChild(tr);
    for(k in data[i]){//k得到的是属性名
        var td = document.createElement('td');
        td.innerHTML = data[i][k];
        tr.appendChild(td);
    }
    var td = document.createElement('td');
    td.innerHTML = '<a href="javascript:;">删除</a>'; 
    tr.appendChild(td);
   
}
var as = document.querySelectorAll('a');
for(var i=0;i<as.length;i++)
{
    as[i].οnclick=function(){
        tbdy.removeChild(this.parentNode.parentNode);

    }
}

*{
    margin:0;
    padding:0;
}
table{
    width:50%;
    margin:20% auto;
    border-collapse: collapse;
    text-align: center;
}
td,th{
    border: 1px solid #333;
}
thead tr {
    height: 40px;
    background-color: #ccc;
}