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 201 数字范围按位与
201. 数字范围按位与 给定范围 [m, n],其中 0 <= m <= n <= 2147483647,返回此范围内所有数字的按位与(包含 m, n 两端点). 示例 1: 输入 ...
- Java实现寻找和为定值的多个数
1 问题描述 输入两个整数n和sum,要求从数列1,2,3,-,n中随意取出几个数,使得它们的和等于sum,请将其中所有可能的组合列出来. 2 解决方案 上述问题是典型的背包问题的应用,即先找出n个数 ...
- Java实现考察团组成
考察团组成 某饭店招待国外考察团.按照标准,对领导是400元/人,随团职员200元/人,对司机50元/人. 考察团共36人,招待费结算为3600元,请问领导.职员.司机各几人. 答案是三个整数,用逗号 ...
- PAT 人口普查
某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的,假设已知镇上没有超过 200 岁的老人,而今天是 2014 ...
- 【整理】JVM知识点大梳理
JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的.引入Java语 ...
- JDBC连接泄露问题的排查过程总结
当前使用的Spring JDBC版本是5.0.0.RC1,HikariCP版本是3.1.0. 今天测试同学反馈在前端页面点击次数多了,就报500错误,数据显示不出来.于是我在后台服务日志中观察发现Hi ...
- python中的类型
python中的类型分为四种 1.整形 2.浮点型 3.字符串 4.对象(除了前三种,其他的都是对象) 比如函数也是对象 def fun(): print(123) type(fun) // < ...
- python flask API 返回状态码
@app.route('/dailyupdate', methods = ['POST','GET'])def dailyUpdate(): try: db=MySQLdb.connect(" ...
- 最全面的SourceTree账号注册教程
前言: 作为一个国内开发者而言使用Git操作神器SoureTree最大的问题就是账号注册问题,因为注册账号的链接在不翻墙的情况下基本上是打不开的(弄过的童鞋应该都体会过),所以有的时候我们需要借助一些 ...
- Spring：BeanDefinition&PostProcessor不了解一下吗？
水稻:这两天看了BeanDefinition和BeanFactoryPostProcessor还有BeanPostProcessor的源码.要不要了解一下 菜瓜:six six six,大佬请讲 水稻 ...