利用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实现 蓝桥杯 算法训练 关联矩阵

    算法训练 关联矩阵 时间限制:1.0s 内存限制:512.0MB 提交此题 问题描述 有一个n个结点m条边的有向图,请输出他的关联矩阵. 输入格式 第一行两个整数n.m,表示图中结点和边的数目.n&l ...

  2. java实现第五届蓝桥杯猜字母

    猜字母 题目描述 把abcd-s共19个字母组成的序列重复拼接106次,得到长度为2014的串. 接下来删除第1个字母(即开头的字母a),以及第3个,第5个等所有奇数位置的字母. 得到的新串再进行删除 ...

  3. 一口气说出9种分布式ID生成方式，面试官有点懵

    一.为什么要用分布式ID? 在说分布式ID的具体实现之前,我们来简单分析一下为什么用分布式ID?分布式ID应该满足哪些特征? 1.1.什么是分布式ID? 拿MySQL数据库举个栗子:在我们业务数据量不 ...

  4. Python内存管理机制-《源码解析》

    Python内存管理机制 Python 内存管理分层架构 /* An object allocator for Python. Here is an introduction to the layer ...

  5. 欧几里得算法求最大公约数-《Algorithms Fourth Edition》第1章

    最大公约数(Greatest Common Divisor, GCD),是指2个或N个整数共有约数中最大的一个.a,b的最大公约数记为(a, b).相对应的是最小公倍数,记为[a, b]. 在求最大公 ...

  6. tensorflow2.0学习笔记第一章第三节

    1.3鸢尾花数据读入 # 从sklearn包datasets读入数据 from sklearn import datasets from pandas import DataFrame import ...

  7. Grafana 插件地图Worldmap不显示

    介绍 最近上了ELK 日志分析,想着手看下用户的分布情况,在kibana 中展示用户分布情况是没有问题的,但是索引添加到Granfana 中的话就无法展示. 问题描述 添加ES索引以后,map地图一片 ...

  8. Android下的缓存策略

    Android下的缓存策略 内存缓存 常用的内存缓存是软引用和弱引用,大部分的使用方式是Android提供的LRUCache缓存策略,本质是个LinkedHashMap(会根据使用次数进行排序) 磁盘 ...

  9. 写了个全局变量的bug，被同事们打脸！！！

    话说栈长前阵子写了一个功能,测试 0 bug 就上线了,上线后也运行好好的,好多天都没有人反馈bug,超爽.. 不出问题还好,出问题就是大问题.. 最近有个客户反馈某些数据混乱问题,看代码死活看不出什 ...

  10. 列表、元组、字典和简单if语句【python实验1】

    第一次实验报告: 学生姓名 总成绩 tom 90 jack 89 john 96 kate 86 peter 100 实验内容3-1 建立两个列表分别对学生的姓名和总成绩信息进行存储 name=['t ...