JS动态生成表格

最新推荐文章于 2023-09-07 16:35:47 发布

原创最新推荐文章于 2023-09-07 16:35:47 发布 · 1.3k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #开发语言

JavaScript 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一种使用JavaScript和HTML动态生成表格的方法，并实现了基于用户操作的数据行删除功能。通过数组存储学生数据，利用DOM操作实现行和单元格的动态创建及数据填充。

具体要求如下。

使用数组把学生数据模拟出来。
动态创建行、单元格。
为单元格填充数据。
提供“删除”链接，可删除所在的行。

// 定义数组存储数据
var arr = [
    {stuname:'张三',subject:'JavaScript',score:100},
    {stuname:'李四',subject:'JavaScript',score:90},
    {stuname:'刘五',subject:'JavaScript',score:90}]
// 获取table控件
var table = document.querySelector('table');
// 使用循环将数据添加进table中
// 外层循环  循环行数
for(let i = 0;i<arr.length;i++){
    // 创建tr节点
    var tr = document.createElement('tr');
    // 将tr添加到table中
    table.appendChild(tr);
    // 循环将每一行的每一个数据添加
    for(let j in arr[i]){
          // 创建td节点
          var td = document.createElement('td');
          // 创建文本节点
          let t = document.createTextNode(arr[i][j]);
          // 将文本节点添加到td节点中
          td.appendChild(t);
           //将td节点添加到tr节点中
          tr.appendChild(td);
    }
    var td = document.createElement('td');
    td.innerHTML = '<a href="#">删除</a>'
    tr.appendChild(td);
    }
    // 删除功能
    // 获取删除超链接控件并添加事件
     let del = document.querySelectorAll('a');
    // 给每个超链接添加click事件
     for(let i of del){
        i.addEventListener('click',function(){
        // 找到a标签然后删除父元素是td然后再找到td的父元素删除即可
        i.parentElement.parentElement.remove();
        })
}