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实现洛谷 P1062 数列
P1062 数列 import java.util.ArrayList; import java.util.Scanner; public class Main { public static voi ...
- Java实现 LeetCode 456 132模式
456. 132模式 给定一个整数序列:a1, a2, -, an,一个132模式的子序列 ai, aj, ak 被定义为:当 i < j < k 时,ai < ak < aj ...
- Java实现 洛谷 Car的旅行路线
输入输出样例 输入样例#1: 1 3 10 1 3 1 1 1 3 3 1 30 2 5 7 4 5 2 1 8 6 8 8 11 6 3 输出样例#1: 47.5 import java.util. ...
- Java实现蓝桥杯VIP算法训练 数组逆序排列
试题 算法训练 数组逆序排列 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 编写一个程序,读入一组整数(不超过20个),并把它们保存在一个整型数组中.当用户输入0时,表示输入结束. ...
- Java实现第八届蓝桥杯最大公共子串
最大公共子串 最大公共子串长度问题就是: 求两个串的所有子串中能够匹配上的最大长度是多少. 比如:"abcdkkk" 和 "baabcdadabc", 可以找到 ...
- android在service中stopself遇到的问题
在service的oncreate中直接调用stopservice停止自己,依然会执行onstartcommand方法后,最后才调用ondestory方法
- Sublime 配置 Markdown，并实时预览
准备: 找到菜单栏:Preferences → Package Control → Package Control:Install Package 需要安装的插件: [Markdown Editing ...
- String源码理解之indexOf函数
1前言 不多说,直接上源码 2源码 我自己的理解,可能表述不清,多看几遍,不行就debug跟一遍代码自然就懂了. /** * Code shared by String and StringBuffe ...
- （四）Maven项目工程目录约定
使用maven创建的工程我们称它为maven工程,maven工程具有一定的目录规范,如下: src/main/java 存放项目的.java文件 src/main/resources 存放项目资源文件 ...
- mybatis 多表联查，多个实体类，如何返回一个List?(表太多，字段太多的问题)
原文:https://ask.csdn.net/questions/674166 自己重新定义一个实体类 把查询结果放到这个实体类中,实体类包含所有的查询结果的字段 一个更好的办法,我发现你这关联表所 ...