jQuery创建表格并实现删除
利用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创建表格并实现删除的更多相关文章
- 示例-创建表格-指定行列&删除表格的行和列
<body> <script type="text/javascript"> /* *上面的方法和你麻烦. *既然操作的是表格, *那么最方便的方式就是使用 ...
- 使用jQuery创建可删除添加行的动态表格，超级简单实用的方法
使用jQuery动态的添加和删除表格里面的行,不多说了直接上代码. <!DOCTYPE html> <html> <head> <meta charset=& ...
- 基于jquery的表格动态创建，自动绑定，自动获取值
最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...
- jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...
- jQuery创建、删除和修改html标签
1.在父标签内创建子标签,新创建的子标签放在父标签最下面 $(parent).append(son).$(son).appendTo(parent) <div class="d&quo ...
- js动态创建表格,删除行列的小例子
js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 第84天：jQuery动态创建表格
jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- jquery动态创建表格
1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- javascript动态创建表格：新增、删除行和列
转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...
随机推荐
- Java实现 LeetCode 507 完美数
507. 完美数 对于一个 正整数,如果它和除了它自身以外的所有正因子之和相等,我们称它为"完美数". 给定一个 整数 n, 如果他是完美数,返回 True,否则返回 False ...
- Java实现中值问题
中值问题是求一个n个数列表中某一数组下标k,它要求该下标元素比列表中的一半元素大,又比另一半元素小,这个中间的值被称为中值. 使用Lomuto划分算法思想,此处引用<算法设计与分析基础>第 ...
- 什么是 JVM ？
什么是 JVM ? 解析:不仅仅是基本概念,还有 JVM 的作用. 答:JVM,即 Java Virtual Machine,Java 虚拟机.它通过模拟一个计算机来达到一个计算机所具有的的计算功能. ...
- java实现转方阵
/* 对一个方阵转置,就是把原来的行号变列号,原来的列号变行号 例如,如下的方阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 转置后变为: 1 5 9 13 2 6 ...
- Linux 用户管理命令-useradd
useradd [选项] 用户名,用来添加用户,实质是创建了几个用户信息的相关文件,选项可以支持手动创建 常见选项 -u UID:手动指定用户的UID -d 家目录 -c 用户说明 -g 组名:指定用 ...
- Linux学习初级篇-鸟哥的Linux私房菜 基础学习篇(第四版)
0.1.2 一切设计的起点:CPU的架构 由于CPU的内部是有一些微指令组成的,所以我们所使用的软件都是要经过CPU内部的微指令集来达成才行.那这些指令集的设计主要又被分为两种设计理念,这是目前世界上 ...
- Mac卸载.net core sdk
NET Core cli提供了卸载脚本 https://github.com/dotnet/cli/tree/master/scripts/obtain/uninstall dotnet-uninst ...
- ubuntu18启动zabbix-agent失败/故障记录
故障现象 ubuntu 16 升级18 之后 安装了zabbix agent 今天突然agent掉了 上去的时候发现 报错: 后来打算-c 启动然后发现 /usr/sbin/zabbix_agentd ...
- MongoDB知识点总结
一:MongoDB 概述 一.NoSQL 简介 1. 概念:NoSQL(Not Only SQL的缩写),指的是非关系型数据库,是对不同于传统的关系型数据库的数据库管理系统的统称.用于超大规模数 ...
- 河青的持久层框架hqbatis
谈到对数据库的操作,powerbuilder 的嵌入式SQL还是最方便的,增.删.改.查都无比的方便,可惜它落败于BS架构的盛起.java 以mvc的框架,实现对数据库的操作,写起来是相当麻烦,jav ...