【jquery】表格动态增加删除

最新推荐文章于 2022-03-26 18:28:19 发布
最新推荐文章于 2022-03-26 18:28:19 发布
阅读量374 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013087359/article/details/17210485
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<title>Untitled Document</title>
		<style>
			.bg{background:#CCCCCC;}
		</style>
		<script src="jquery-1.8.2.js"></script>
		<script>
			$(function(){
				$("table").append($("tr:eq(1)").clone(true).show());
				$("table").append($("tr:eq(1)").clone(true).show());
				$("table").append($("tr:eq(1)").clone(true).show());
				$("table").append($("tr:eq(1)").clone(true).show());
				$("tr:eq(0)").css("background","pink");
				$("tr:gt(1):odd").addClass("bg");
				$("td a").click(function(){
					$(this).parents("tr").remove();
					$("tr:gt(1)").removeClass("bg");
					$("tr:gt(1):odd").addClass("bg");
				})
				$("body>a").click(function(){
					$("table").append($("tr:eq(1)").clone(true).show());
					$("tr:gt(1)").removeClass("bg");
					$("tr:gt(1):odd").addClass("bg");
				})
			})
		</script>
	</head>
	<body>
		<table border="1">
			<tr>
				<th><input type="checkbox"/>姓名</th>
				<th>卡号</th>
				<th>会员等级</th>
				<th>电话号码</th>
				<th>出生年月</th>
				<th>消费金额</th>
				<th></th>
			</tr>
			<tr style="display:none;">
				<td><input type="checkbox"/>张三</td>
				<td>1111111</td>
				<td>1</td>
				<td>1234567</td>
				<td>1992-08-12</td>
				<td>1000</td>
				<td><a>删除</a></td>
			</tr>
			
		</table>
		<a>添加</a>
	</body>
</html>

心之所及，皆是欢笑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery 表格新增/删除行
一头老母猪
07-14 2026
JQuery 表格新增/删除行表格在网页中的作用示例表格JQuery新增表格行JQuery删除表格行表格行数重新排序参考链接 表格在网页中的作用 实践当中，需要经常对表格进行操作，当表格的行数不定时，就需要为表格添加新增/删除功能，提高对用户的友好度。 示例表格 以下为演示用的表格 <table class="table table-hover table-responsive"> <thead> <tr>
jquery动态增加删除表格行的小例子
10-26
在这个例子中，我们看到了如何使用jQuery来动态地增加和删除HTML表格中的行。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画效果。在这个小例子中，主要涉及了以下jQuery知识点： 1. **jQuery...
jquery动态列表的新增、编辑、删除
03-01 447
本文参考网络的一个例子（提供附件下载） 动态添加行、删除行，保存时遍历某列的值，组成逗号分隔的字符串传到后台，编辑时显示结果集，能继续添加和删除。 主要的代码如下： [code="java"] $(document).ready(function(){ $("#but").click(function(){ var $table=$("#tzgjz_tab tr"); ...
JQuery（遍历方法及增删改查方法）
ksx2333的博客
04-01 527
文章目录前言1 jQuery遍历-过滤（位置）1.1 first()：返回被选元素的第一个元素。1.2 last()：返回被选元素的最后一个元素。1.3 eq(index)：返回带有被选元素的指定索引号的元素。1.4 filter()：将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。1.5 not()：方法返回不符合一定条件的元素。1.6 has()：返回拥有一个或多个元素在其内的所有元素。测试源码2 jQuery遍历-查找（孩子/父母/兄弟标签）2.1 children() 返回被选元素的所有直接
jQ实现简单的增删改查
qq_53632527的博客
10-08 183
reduce() 方法的
jQuery动态添加与删除表格行【append方法与on方法与eq方法】
mizuhokaga的博客
02-20 1529
基于jquery版本:jquery-1.10.1.js 去实现表格的 动态添加和动态删除(看js代码直接点下面链接) 需求: 将表单的值提交至表格,并且可以删除 html代码很简单: <body> <h1>添加用户</h1> <div id="box"> name:<input type="text" id="user"/> ...
jQuery实现动态添加删除表格的行
weixin_48747169的博客
03-26 2398
index.jsp <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <title>Title</title> <style type="text/css"> #tab{ width: 500px;
基于Jquery的表格的动态增加删除
flash_love的博客
11-17 444
有时候工作需要就简单记录，其实还是比较简单的，只是简单的JQuery的函数应用。 AddorDeleteTable
Jquery实现表格的增加与删除案例
量子前端的博客
09-19 1635
这是一个通过浮动窗口添加课程信息（一条tr）的小功能，界面如图所示，点击添加数据会出现新窗口。 jquery中的事件全部都是click事件，分别是添加数据、添加课程、关闭添加课程窗口和GET按钮四个事件。 代码：~~~~~~~~~~~~~ <body> <button id = 'btn'>添加数据</button> <div id = 'dv1'> <table> <tr style = 'background-color
Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
热门推荐
鄙人kunzhi96，感恩遇见！
05-15 2万+
最近做的项目中有一个需求就是要求在线填写表格内容时，不够的话可以动态添加一行，我这里用的jQuery来实现，下面是我项目截图展现： 当点击“添加输入框”按钮时，就会自动添加一行 下面我们来一下代码实现（把实际项目中的HTML代码简化了，其他功能可自己加） <!DOCTYPE html> <html> <head> <meta charset="utf-...
jQuery实现表格的动态删除或添加
Gardenia
07-21 643
jQuery实现表格的动态删除或添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>rows</title> <script src="js/jquery-3.3.1.min.js"></script> <...
JQuery实现动态表格点击按钮表格增加一行
10-25
动态表格,功能为点击添加按钮，表格增加一行并给其name属性赋予的值，点击删除，自动删除这一行，具体实现如下
JQuery实现表格动态增加行并对新行添加事件
10-25
本示例探讨了如何使用jQuery实现表格动态增加行的功能，并且在新行上添加事件，以提升用户体验和性能。 首先，我们了解目标：创建一个表格，允许用户在表格末尾动态增加空白行，而不是一次性添加大量行，从而避免...
jQuery表格增加删除特效代码
03-20
此外，"使用帮助.txt"和"说明.url"文件可能包含了关于如何使用这个代码的详细步骤和更多提示，建议参考这些资料以更好地理解和应用这个jQuery表格增删功能。 总的来说，这个项目为开发者提供了一个简单易用的jQuery...
ubuntu20.04安装教程.docx
07-09
安装 Ubuntu 20.04（Focal Fossa）的步骤如下所示。确保在开始安装之前备份重要数据，以防万一。 1. 下载 Ubuntu 20.04 镜像文件 访问 Ubuntu 官网（https://ubuntu.com/download/desktop）下载 Ubuntu 20.04 的镜像文件。根据你的计算机架构选择合适的版本（通常是 64 位的）。 2. 制作启动盘 你可以使用以下两种方法制作 Ubuntu 的启动盘： 使用 Rufus 制作启动盘（适用于 Windows）： 下载并安装 Rufus。 插入空白 USB 驱动器。 打开 Rufus，选择你下载的 Ubuntu 镜像文件。 点击 "开始" 制作启动盘。 使用 Etcher 制作启动盘（跨平台）： 下载并安装 Etcher。 打开 Etcher，选择 Ubuntu 镜像文件和你的 USB 驱动器。 点击 "Flash!" 制作启动盘。 3. 安装 Ubuntu 20.04 制作完成后，将 USB 启动盘插入到需要安装 Ubuntu 的计算机上，然后按照以下步骤进行安装： 启动计算机：在 BIOS 设置
贵阳市建筑物矢量数据（Shp格式+带高度）.txt
最新发布
07-09
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。
学校安全责任追究制度.docx
07-09
学校安全责任追究制度
述职报告（08）PPT模板.pptx
07-09
述职报告（08）PPT模板.pptx
GPT人工智能方案-1
07-09
### GPT人工智能方案 #### 一、项目背景 近年来，人工智能（AI）技术快速发展，尤其是自然语言处理（NLP）领域的突破使得AI在各种应用场景中得到了广泛的应用。GPT（Generative Pre-trained Transformer）是由OpenAI开发的一种语言模型，它能够生成高质量的自然语言文本。为了在企业和开发者中推广和应用这一技术，我们提出了一个基于GPT的AI方案。 #### 二、目标用户 1. **企业客户**：希望在客服、内容创作、数据分析等方面应用AI技术以提升效率和质量。 2. **开发者**：需要集成高质量的自然语言生成能力到他们的应用中。 3. **科研人员**：进行NLP相关研究和开发。 #### 三、功能模块 1. **文本生成**： - 根据给定的提示生成自然语言文本。 - 支持多种生成模式，包括文章撰写、对话生成、代码生成等。 2. **文本分析**： - 进行情感分析、主题提取等文本处理任务。 - 提供文本摘要和关键字提取功能。 3. **对话系统**： - 构建智能对话系统，支持多轮对话和上下文理解
JQuery实现网页表格动态增加与删除内容
05-25
以下是一个简单的示例，演示如何使用JQuery实现网页表格动态增加和删除内容。 首先，我们需要在HTML文件中引入JQuery库： ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值