JavaScript动态生成带删除行功能的表格

更新时间：2021年09月30日 11:03:41 作者：qq_39111074

这篇文章主要为大家详细介绍了JavaScript动态生成带删除行功能的表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码，供大家参考，具体内容如下

动态生成一个带删除行功能的表格：

实现思路

1、获取表格<tbody>元素
2、获取要填充的数据，一般是从数据库取数据，也可以自己模拟一组数据进行测试，数据是以对象的形式存储的，多行数据可以用数组进行存储，数组中每一项均为一个对象
3、①循环遍历对象数组，创建行，
②嵌套一个循环- - -循环遍历对象：
a.根据属性创建所需个数的单元格，
b.并给单元格赋值，
c.然后添加单元格到行中，
③添加一个单元格，并赋值一个a链接，文本内容- - -“删除”，将该单元格添加到行
4、添加改行到tbody中
5、获取所有的 a 元素- - -document.querySelectorAll(‘a')，获得一个对象数组
6、循环遍历 a 对象数组，给 a 链接绑定点击事件，添加删除功能- - -tbody.removeChild(this.parentNode.parentNode);

代码示例

<!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>动态生成表格</title>
    <style>
        table {
            border: 1px solid pink;
            border-collapse: collapse;
        }
        
        thead {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <table border="1" cellpadding="5" cellspacing="0" align="center" width="600px">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var tbody = document.querySelector('tbody');

        var list = [{
            'name': '海绵宝宝',
            'subject': 'JavaScript',
            'age': 66
        }, {
            'name': '哆唻爱梦',
            'subject': 'JavaScript',
            'age': 99
        }, {
            'name': '史迪仔',
            'subject': 'JavaScript',
            'age': 60
        }, {
            'name': '皮卡丘',
            'subject': 'JavaScript',
            'age': 88
        }];

        for (var i = 0; i < list.length; i++) {
            // 一、创建行
            var tr = document.createElement('tr');

            // 二、填充数据
            for (var k in list[i]) {
                console.log(list[i][k]);
                // 1.创建td单元格
                var td = document.createElement('td');
                // 单元格填充内容
                td.innerHTML = list[i][k];
                // 2.添加单元格
                tr.appendChild(td);
            }
            // 三、添加删除链接
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;" >删除</a>';
            tr.appendChild(td);
            // 四、添加行
            tbody.appendChild(tr);
        }

        // 添加删除功能
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }

        console.log(tbody.childNodes);
        console.log(tbody.children);
    </script>
</body>

</html>

页面效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
表格

Array的push与unshift方法性能比较分析
Array的push与unshift方法都能给当前数组添加元素，不同的是，push是在末尾添加，而unshift则是在开头添加。
2011-03-03
JavaScript中concat复制数组方法浅析
在本篇文章里小编给大家总结了关于JavaScript中concat复制数组方法知识点，有需要的朋友们可以学习下。
2019-01-01
javascript中mouseenter与mouseover的异同
javascript中mouseover和mouseenter的区别主要在于监听对象的子元素是否触发事件。mouseover：鼠标移入监听对象中，或者从监听对象的一个子元素移入另一个子元素中时触发该事件。mouseenter：鼠标移入监听对象时触发，在监听对象内移动不会触发。
2017-06-06
详解如何在 JavaScript 中使用三元运算符
这篇文章主要为大家介绍了详解如何在 JavaScript 中使用三元运算符示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
在JavaScript中如何访问暂未存在的嵌套对象
这篇文章主要给大家介绍了关于在JavaScript中如何访问暂未存在的嵌套对象的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06
Javascript拖拽&拖放系列文章3之细说事件对象
Javascript中的事件对象其实和.NET中继承自EventArgs类的派生类类似，用来给事件处理程序传递状态信息，从而进行相应的操作。这一篇文章将讲述Javascript事件对象中和实现拖拽功能相关的几个属性，并在最后将IE事件模型和标准DOM事件模型的差异封装到一个类中，从而适应所有的浏览器。
2008-09-09
JavaScript网络请求工具库axios使用实例探索
这篇文章主要为大家介绍了JavaScript网络请求工具库axios使用实例探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2024-01-01
JavaScript的各种常见函数定义方法
这篇文章主要介绍了JavaScript的各种常见函数定义方法,包含了一些技巧的测试与分析总结,需要的朋友可以参考下
2014-09-09
深入理解JS实现快速排序和去重
在js面试中快速排序和数组去重是比较常问的面试题，下面小编给大家分享下我对JS实现快速排序和去重的理解，感兴趣的朋友一起看看吧
2016-10-10
JS中mouseup事件丢失的原因与解决办法
这篇文章主要跟大家介绍了关于Javascript中mouseup事件丢失的原因与解决办法的相关资料，文中给出详细的示例代码供大家参考学习，需要的朋友们下面跟着小编一起来学习学习吧。
2017-06-06