利用jQuery创建一个简单的表格，并添加一个简单的删除按钮

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .tb {

            width: 200px;

            text-align: center;

        }

    </style>

</head>

<body>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>

        $(function () {

            let arr = [

                {

                    id: 2,

                    name: 'sjl',

                    age: 10

                },

                {

                    id: 3,

                    name: 'sddl',

                    age: 20

                },

                {

                    id: 5,

                    name: 'dfjl',

                    age: 30

                }

            ]

            let table = $('<table/>').addClass('tb');

            let th1 = $('<th>').html('编号');

            let th2 = $('<th>').html('名字');

            let th3 = $('<th>').html('年龄');

            let th4 = $('<th>').html('按钮');

            let thead = $('<tr/>').append(th1).append(th2).append(th3).append(th4);

            table.append(thead);

            $('body').append(table);

            arr.forEach(r => {

                let tr = $('<tr/>');

                Object.values(r).forEach(v => {

                    let td = $('<td/>').html(v);

                    tr.append(td);

                });

                let btn = $('<button/>').html('删除').addClass('del');

                tr.append(btn)

                table.append(tr)

            })

            $('.del').click(function(){

                if(confirm('确定删除吗？'))

                $(this).parents('tr').remove();

            })

        })

    </script>

</body>

</html>

jQuery创建表格并实现删除的更多相关文章

  1. 示例-创建表格-指定行列&删除表格的行和列

    <body> <script type="text/javascript"> /* *上面的方法和你麻烦. *既然操作的是表格, *那么最方便的方式就是使用 ...

  2. 使用jQuery创建可删除添加行的动态表格，超级简单实用的方法

    使用jQuery动态的添加和删除表格里面的行,不多说了直接上代码. <!DOCTYPE html> <html> <head> <meta charset=& ...

  3. 基于jquery的表格动态创建，自动绑定，自动获取值

    最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...

  4. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  5. jQuery创建、删除和修改html标签

    1.在父标签内创建子标签,新创建的子标签放在父标签最下面 $(parent).append(son).$(son).appendTo(parent) <div class="d&quo ...

  6. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  7. 第84天：jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. jquery动态创建表格

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. javascript动态创建表格：新增、删除行和列

    转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...

随机推荐

  1. Java实现 LeetCode 589 N叉树的前序遍历（遍历树）

    589. N叉树的前序遍历 给定一个 N 叉树,返回其节点值的前序遍历. 例如,给定一个 3叉树 : 返回其前序遍历: [1,3,5,6,2,4]. 说明: 递归法很简单,你可以使用迭代法完成此题吗? ...

  2. Java实现蓝桥杯VIP算法训练 小生物的逃逸

    试题 算法训练 小生物的逃逸 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 空间中有n个球,这些球不相交也不相切.有m个可以视为质点的小生物,可能在某些球内,也可能在所有球之外,但 ...

  3. Java实现 LeetCode 263 丑数

    263. 丑数 编写一个程序判断给定的数是否为丑数. 丑数就是只包含质因数 2, 3, 5 的正整数. 示例 1: 输入: 6 输出: true 解释: 6 = 2 × 3 示例 2: 输入: 8 输 ...

  4. 第六届蓝桥杯JavaA组国(决)赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.胡同门牌号 小明家住在一条胡同里.胡同里的门牌号都是连续的正整数,由于历史原因,最小的号码并不是从1开始排的. 有一天小明突然发现了有 ...

  5. Java中map.getOrDefault()方法的使用

    Map.getOrDefault(Object key, V defaultValue)方法的作用是:   当Map集合中有这个key时,就使用这个key值:   如果没有就使用默认值defaultV ...

  6. 经典文本特征表示方法: TF-IDF

    引言 在信息检索, 文本挖掘和自然语言处理领域, IF-IDF 这个名字, 从它在 20 世纪 70 年代初被发明, 已名震江湖近半个世纪而不曾衰歇. 它表示的简单性, 应用的有效性, 使得它成为不同 ...

  7. 查看Android系统中硬件信息的文件

    文件目录: 使用Linux命令,进入到/proc目录 进入/proc目录,可以查看内存信息(memoinfo)或CPU信息(cpuinfo),使用cat命令

  8. test for OCr

  9. 前端JS的服务订阅&服务发布

    var eventCenter = { sub:function(mesName, mesCallback){ this.argus=this.argus||{}; this.argus[mesNam ...

  10. CPU性能分析工具原理

    转载请保留以下声明 作者:赵宗晟 出处:https://www.cnblogs.com/zhao-zongsheng/p/13067733.html 很多软件都要做性能分析和性能优化.很多语言都会有他 ...