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 423 从英文中重建数字
423. 从英文中重建数字 给定一个非空字符串,其中包含字母顺序打乱的英文单词表示的数字0-9.按升序输出原始的数字. 注意: 输入只包含小写英文字母. 输入保证合法并可以转换为原始的数字,这意味着像 ...
- Java实现【USACO】1.1.2 贪婪的礼物送礼者 Greedy Gift Givers
[USACO]1.1.2 贪婪的礼物送礼者 Greedy Gift Givers 题目描述 对于一群要互送礼物的朋友,你要确定每个人送出的礼物比收到的多多少(and vice versa for th ...
- Java实现 蓝桥杯VIP 算法训练 一元三次方程
问题描述 有形如:ax3+bx2+cx+d=0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d 均为实数),并约定该方程存在三个不同实根(根的范围在-100至100之间),且根与根之差 ...
- Java实现 LeetCode 68 文本左右对齐
68. 文本左右对齐 给定一个单词数组和一个长度 maxWidth,重新排版单词,使其成为每行恰好有 maxWidth 个字符,且左右两端对齐的文本. 你应该使用"贪心算法"来放置 ...
- java实现 洛谷 P1427 小鱼的数字游戏
题目描述 小鱼最近被要求参加一个数字游戏,要求它把看到的一串数字(长度不一定,以0结束,最多不超过100个,数字不超过2^32-1),记住了然后反着念出来(表示结束的数字0就不要念出来了).这对小鱼的 ...
- 原声js数组去重方法
数组去重方法 方法一 ---- 利用数组filter + indexOf方法去重 方法二 ---- 利用数组forEach + indexOf方法去重 方法三 ---- 利用数组from方法 + Se ...
- protected关键字对父子成员变量的影响
include<iostream> #include<string> using namespace std; class parent{ protected: int mv; ...
- PyQt中QThread多线程的正确用法【待完善】
先贴几篇有意思的讨论 https://www.qt.io/blog/2010/06/17/youre-doing-it-wrong#commento-login-box-container https ...
- Android学习笔记显示和隐藏ActionBar
要在应用中使用ActionBar 需要android:minSdkVersion:11以上,现在基本都可以用了 创建Android项目如果不做特殊设置默认都带有ActionBar 如果不想要Actio ...
- 记录一次Flink作业异常的排查过程
最近2周开始接手apache flink全链路监控数据的作业,包括指标统计,业务规则匹配等逻辑,计算结果实时写入elasticsearch. 昨天遇到生产环境有作业无法正常重启的问题,我负责对这个问题 ...