利用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 516 最长回文子序列

    516. 最长回文子序列 给定一个字符串s,找到其中最长的回文子序列.可以假设s的最大长度为1000. 示例 1: 输入: "bbbab" 输出: 4 一个可能的最长回文子序列为 ...

  2. Java实现 LeetCode 463 岛屿的周长

    463. 岛屿的周长 给定一个包含 0 和 1 的二维网格地图,其中 1 表示陆地 0 表示水域. 网格中的格子水平和垂直方向相连(对角线方向不相连).整个网格被水完全包围,但其中恰好有一个岛屿(或者 ...

  3. Java实现 洛谷 P1115 最大子段和

    import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner scann ...

  4. Java实现约瑟夫斯问题

    1 问题描述 引用自<算法设计与分析基础>第三版: 约瑟夫斯问题,是以弗拉瓦斯.约瑟夫斯(Flavius Josephus)的名字命名的.约瑟夫斯是一个著名的犹太历史学家,参加并记录了公元 ...

  5. java算法集训结果填空题练习2

    1 欧拉与鸡蛋 大数学家欧拉在集市上遇到了本村的两个农妇,每人跨着个空篮子.她们和欧拉打招呼说两人刚刚卖完了所有的鸡蛋. 欧拉随便问:"卖了多少鸡蛋呢?" 不料一个说:" ...

  6. Python爬虫 爬取搜狗搜索到的内容页面

    废话不多说,直接上代码 import requests def main(): url='https://www.sogou.com/web' headers={ 'User_Agent':'Mozi ...

  7. Java并发编程实战总结 （一）

    前提 首先该场景是一个酒店开房的业务.为了朋友们阅读简单,我把业务都简化了. 业务:开房后会添加一条账单,添加一条房间排期记录,房间排期主要是为了房间使用的时间不冲突.如:账单A,使用房间1,使用时间 ...

  8. 来看看阿里架构师Java 代码打日志姿势！你也是这样写的吗

    使用slf4j 使用门面模式的日志框架,有利于维护和各个类的日志处理方式统一. 实现方式统一使用: Logback框架 打日志的正确方式 什么时候应该打日志 当你遇到问题的时候,只能通过debug功能 ...

  9. Logstash下字段以及嵌套Json字段类型转换

    前言 从filebeat传输到Logstash的数据,某个字段需要由string类型装换成float类型.但是不管怎么改logstash的配置文件都不生效,其实官方文档都有,但是具体细节方面的东西就得 ...

  10. while or if

    多线程 wait  && notifyAll 模式实现时,如果 锁中有判断,对共享对象有curd 操作时,有可能出现异常 即,判断 条件 这个时候关键字有 if 改为while 即可 ...