利用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代码（9） ---guava之Lists、Maps

     guava之Lists.Maps 谷歌提供了guava包里面有很多的工具类,Lists和Maps集合工具,集合操作做了些优化提升 一.概述 1.静态工厂方法 (1)Guava提供了能够推断泛型的静态 ...

  2. Github 创建SSH密钥克隆仓库详解

    1.登录Github主页,点击任意一个repository,点击Clone or download,点击Use SSH 2.点击add a new pulbic key,创建公钥 3.下面图中的Tit ...

  3. 循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理

    我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...

  4. “进大厂大半年，每个月都想走！”大公司 VS 小公司到底该如何选择？

    前言 江湖风云不断,有人吐槽阿里996,也有人吐槽华为狼性文化,这不,就看到有腾讯员工吐槽“进腾讯大半年,每个月都想走!” “和我一样,进去一周就想走”.“我都陷入自我怀疑了,以为自己适应不了大公司” ...

  5. 实验五shell脚本编程

    项目 内容 这个作业属于哪个课程 <班级课程的主页链接> 这个作业的要求在哪里 作业要求链接地址 学号-姓名 17043220-万文文 作业学习目标 1)了解shell脚本的概念及使用.2 ...

  6. mui消息弹出确认框

    var btnArray = ['以后再说', '前往添加']; mui.confirm('你需要即时添加员工才可正常使用', '添加员工', btnArray, function(e) { if ( ...

  7. 【Spring Cloud 系列】 二、Spring Cloud Eureka 的第一印象

    Eureka : 翻译翻译,找到了!(惊讶语气) Spring CLoud 中的 Spring Cloud Eureka,用于 分布式项目中的服务治理.是对Netflix 套件中的Eureka 的二次 ...

  8. centos7下docker的安装教程

    Centos7下docker安装教程以及踩过的那些坑 推荐在Centos下安装docker,在windows下安装docker可能会遇到很多的问题,而且docker官方推荐使用linux环境来使用do ...

  9. 【原创】Linux中断子系统（三）-softirq和tasklet

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  10. SQL中游标的使用示例

    declare @email_source varchar(MAX); --1.原始发件人字段 declare @key_name varchar(50); --2.我方卷号或客户代码 declare ...