利用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 307 区域和检索 - 数组可修改

    307. 区域和检索 - 数组可修改 给定一个整数数组 nums,求出数组从索引 i 到 j (i ≤ j) 范围内元素的总和,包含 i, j 两点. update(i, val) 函数可以通过将下标 ...

  2. Java实现 LeetCode 62 不同路径

    62. 不同路径 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为"Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中 ...

  3. XStrea学习手册

    ​​ 一.前言 1.XStream官网 http://x-stream.github.io 2.XStream是什么 XStream是一个简单的基于Java的类库,用来将Java对象序列化成XML(J ...

  4. requireJS模块化

    1. JavaScript里面js代码的写法:目标是解决冲突和依赖 函数式编程,全局函数和变量--很容易覆盖 对象的写法--也会从外面改变 命名空间:利用名称不同缓冲js代码的冲突---名称太长,不方 ...

  5. HTML 5的革新——语义化标签section和article的区别

    原文地址:https://stackoverflow.com/questions/33910294/what-is-the-difference-between-article-and-section ...

  6. 大话计算机网络一 聊聊UDP

    引言 UDP是一个简单的面向数据报的运输层协议 UDP不提供可靠性,它把应用程序传给IP层得数据发送出去,不保证它们能达到目的地 UDP首部 端口号表示发送进程和接受进程. UDP长度字段指的是UDP ...

  7. @Autowired 注解详解

    前言 我们平时使用 Spring 时,想要 依赖注入 时使用最多的是 @Autowired 注解了,本文主要讲解 Spring 是如何处理该注解并实现 依赖注入 的功能的. 正文 首先我们看一个测试用 ...

  8. thinkphp5集成GatewayWorker

    Workerman是一款纯PHP开发的开源高性能的PHP socket 服务器框架,而GatewayWorker则是基于Workerman开发的一个长连接框架,支持分布式部署,支持全局广播或者向任意客 ...

  9. SUBSTRING / CHARINDEX_函数随手练_2

    SUBSTRING / CHARINDEX_函数随手练_2环境:MSSQL 2014(AdventureWorks2008R2附加到2014中的表 Location) /* Learning SQL ...

  10. .NETCore微服务探寻(一) - 网关

    前言 一直以来对于.NETCore微服务相关的技术栈都处于一个浅尝辄止的了解阶段,在现实工作中也对于微服务也一直没有使用的业务环境,所以一直也没有整合过一个完整的基于.NETCore技术栈的微服务项目 ...