jQuery实现列表的动态增加、删除和全选操作

最新推荐文章于 2023-04-17 19:11:51 发布
最新推荐文章于 2023-04-17 19:11:51 发布
阅读量1.6k 收藏 5
点赞数 1
文章标签： js jquery html css 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XingKongLiu6/article/details/109719533
版权

目录

隔行换色

CSS代码

.odd {
				background-color: rosybrown;
			}

jQuery代码

//隔行换色
				$("tr:odd").addClass("odd");

全选/取消全选

//设置多选框全选和取消全选事件
				$("tr th:first").append("<span id='showStr'></span>");
				$("th input:checkbox").click(function() {
					if($(this).prop("checked")) {
						$("td input:checkbox").prop("checked", true);
						$("#showStr").replaceWith("<span id='showStr'>已经全选</span>");
					} else {
						$("td input:checkbox").prop("checked", false);
						$("#showStr").replaceWith("<span id='showStr'>已经取消</span>");
					}
				});

删除

//删除操作
				$("tr td a:nth-child(1)").click(function() {
					if(confirm("是否删除？")) {
						//删除前去除颜色
						$("tr:odd").removeClass("odd");
						$(this).parents("tr").remove();
						//隔行换色
						$("tr:odd").addClass("odd");
					}
				});

新增

CSS代码

//默认隐藏新增界面
#hide {
				display: none;
				background-color: lightcyan;
				width: 614px;
				margin: 0 auto;
			}

HTML代码

<form id="hide">
			<div>
				分类的ID<input type="text" class="id" /><br />
				分类的名称<input type="text" class="name" /><br />
				分类的描述<input type="text" class="describe" /><br />
				<input type="button" value="提交" id="submit" />
				<input type="button" value="取消" id="cancel" /><br />
			</div>
		</form>

jQuery代码

//点击新增时显示新增列表
				$("#fun").click(function() {
					$("#hide").slideDown(700);
				});
				//新增操作
				$("#submit").click(function() {
					var id = $(".id").val();
					var name = $(".name").val();
					var describe = $(".describe").val();
					if(id == "" || name == "" || describe == "") {
						alert("请输入所有值");
						return;
					}
					//复制前去除颜色
					$("tr:odd").removeClass("odd");
					//复制table里的一个tr
					var copyDom = $("table tr:eq(2)").clone(true);
					//把复制的tr放到table最后面
					$("table").append(copyDom);
					//获取刚才复制的tr
					var trDom = $("tr:last td");
					trDom.eq(1).text(id);
					trDom.eq(2).text(name);
					trDom.eq(3).text(describe);
					//新增后添加隔行换色
					$("tr:odd").addClass("odd");
				});
				//点击取消时隐藏新增列表
				$("#cancel").click(function() {
					$("#hide").slideUp(700);
				});

完整代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
		<style>
			.odd {
				background-color: rosybrown;
			}
			
			a {
				text-decoration: none;
			}
			
			th,
			td {
				width: 120px;
				height: 35px;
				text-align: center;
			}
			
			table {
				margin: 0 auto;
			}
			
			div {
				text-align: center;
			}
			
			#hide {
				display: none;
				background-color: lightcyan;
				width: 614px;
				margin: 0 auto;
			}
		</style>
		<script>
			$(function() {
				//隔行换色
				$("tr:odd").addClass("odd");

				//设置多选框全选和取消全选事件
				$("tr th:first").append("<span id='showStr'></span>");
				$("th input:checkbox").click(function() {
					if($(this).prop("checked")) {
						$("td input:checkbox").prop("checked", true);
						$("#showStr").replaceWith("<span id='showStr'>已经全选</span>");
					} else {
						$("td input:checkbox").prop("checked", false);
						$("#showStr").replaceWith("<span id='showStr'>已经取消</span>");
					}
				});

				//删除操作
				$("tr td a:nth-child(1)").click(function() {
					if(confirm("是否删除？")) {
						//删除前去除颜色
						$("tr:odd").removeClass("odd");
						$(this).parents("tr").remove();
						//隔行换色
						$("tr:odd").addClass("odd");
					}
				});
				//点击新增时显示新增列表
				$("#fun").click(function() {
					$("#hide").slideDown(700);
				});
				//新增操作
				$("#submit").click(function() {
					var id = $(".id").val();
					var name = $(".name").val();
					var describe = $(".describe").val();
					if(id == "" || name == "" || describe == "") {
						alert("请输入所有值");
						return;
					}
					//复制前去除颜色
					$("tr:odd").removeClass("odd");
					//复制table里的一个tr
					var copyDom = $("table tr:eq(2)").clone(true);
					//把复制的tr放到table最后面
					$("table").append(copyDom);
					//获取刚才复制的tr
					var trDom = $("tr:last td");
					trDom.eq(1).text(id);
					trDom.eq(2).text(name);
					trDom.eq(3).text(describe);
					//新增后添加隔行换色
					$("tr:odd").addClass("odd");
				});
				//点击取消时隐藏新增列表
				$("#cancel").click(function() {
					$("#hide").slideUp(700);
				});
			});
		</script>
	</head>

	<body>
		<div><input type="button" value="新增" id="fun" /></div>
		<form>
			<table border="1" cellpadding="0" cellspacing="0">
				<tr>
					<th><input type="checkbox" /></th>
					<th>分类的ID</th>
					<th>分类的名称</th>
					<th>分类的描述</th>
					<th>操作</th>
				</tr>
				<tr id="retain">
					<td><input type="checkbox" /></td>
					<td>1</td>
					<td>第一行</td>
					<td>第一行</td>
					<td>
						<a href="#">删除</a>&nbsp;
						<a href="#">修改</a>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>2</td>
					<td>第二行</td>
					<td>第二行</td>
					<td>
						<a href="#">删除</a>&nbsp;
						<a href="#">修改</a>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>3</td>
					<td>第三行</td>
					<td>第三行</td>
					<td>
						<a href="#">删除</a>&nbsp;
						<a href="#">修改</a>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>4</td>
					<td>第四行</td>
					<td>第四行</td>
					<td>
						<a href="#">删除</a>&nbsp;
						<a href="#">修改</a>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>5</td>
					<td>第五行</td>
					<td>第五行</td>
					<td>
						<a href="#">删除</a>&nbsp;
						<a href="#">修改</a>
					</td>
				</tr>
			</table>
		</form>
		<form id="hide">
			<div>
				分类的ID:<input type="text" class="id" /><br />
				分类的名称:<input type="text" class="name" /><br />
				分类的描述:<input type="text" class="describe" /><br />
				<input type="button" value="提交" id="submit" />
				<input type="button" value="取消" id="cancel" /><br />
			</div>
		</form>
	</body>

</html>

页面效果

在这里插入图片描述

星空Liu
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery列表动态增加和删除
weixin_47803030的博客
11-05 495
HTML代码 <input type="button" value="新增" class="insert"> <table cellspacing="0px" class="a"> <thead> <th><input type="checkbox"></th> <th>分类的ID</th> <th>分类的名称</th> <th>分类的描
jQuery实现列表的动态增加和删除
⁣  ⁡⁣⁣
11-04 3294
通过jQuery实现列表的数据动态添加与删除 代码演示 演示地址 背景隔行换色 CSS代码 /* 设置奇数行颜色 */ .even { background-color: dodgerblue; } /* 设置偶数行背景颜色 */ .odd { background-color: pink; } JavaScript代码 // 设置奇数偶数行的背景颜色 $("tr:even").addClass("even"); $("tr:odd").addClass("odd"); 全.
jQuery实现列表的增加和删除
weixin_30872671的博客
06-14 227
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <style> </style> </head> <bo...
jQuery实现列表的增加和删除功能
10-18
主要介绍了jQuery实现列表的增加和删除功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
jQuery-对列表的操作
diaoweisang7683的博客
06-19 359
主要是通过对dom元素的增加和删除实现对数据增加和删除 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width...
jquery 列表动态添加输入
07-04
对表单进行复制 同时可以根据输入内容添加后动态生成 HelperTable.Copy.run({ defaultData:data,//加载的数据 tableElement:"#rowContent",//列表容器 indexField:'id',//指定唯一标识 数据唯一标识字段 first:true,//是否从上添加 false表示在下面添加 rowModel:function(data){//单条数据模型 return WorkExp.rowIndexModel(data); }, del:function(context,parent,index,indexVal){//删除按钮动作 如果不设置此项则不显示删除按钮 返回为true则删除缓存hash 否则不删除 parent.remove(); console.log(index.indexVal); return true; } });
jquery实现购物车购物车全选和增加删除商品.zip
10-14
以上就是使用jQuery实现购物车全选、商品增删功能的主要步骤和知识点。通过理解并实践这些内容，开发者可以构建一个功能完善的前端购物车系统。记得在实际开发中考虑用户体验、错误处理和性能优化等方面，以提供更高...
使用html + jquery实现页面表格的增加，删除，批量删除，全选，反选功能。
qq_42797435的博客
03-26 1474
笔记 2021-3-26 demo 使用html + jquery实现页面表格的增加，删除，批量删除，全选，反选功能。 页面效果如下 html 代码如下 <div> <div> <input type="button" value="批量删除" onclick="dels()"/> <input type="button" value="反选" onclick=
利用Bootstrap实现表格复选框checkbox全选
08-31
接下来，我们需要用JavaScript（这里我们可以使用jQuery）来实现全选和反选的功能。以下是一个简单的实现： ```javascript $(document).ready(function() { // 获取全选复选框 var checkAll = $('#checkAll'); ...
jquery select(列表)的操作（取值/赋值）
01-19
1.获取选中值： $(“#xmzt option:selected”).val() //xmzt是<select>的id 2.设置选中项：$(“select[@id=’pagesize_slt’]”)[0].selectedIndex = 1;//—–<select>的index从0开始，所以1是第二项 很奇怪的是，我是用id来获取的，应该是唯一值，但$(“select[@id=’pagesize_slt’]”).selectedIndex = 1;是不对的。必须加[0]。也就是说，$(“select[@id=’pagesize_slt’]”)返回的其实是一个数组。这点需要注意。
jquery动态列表的新增、编辑、删除
04-02
NULL 博文链接：https://simplehumn.iteye.com/blog/1434818
jquery动态增加修改删除表格,上移下移功能
04-29
jquery做的动态增加修改删除表格,上移下移功能,实际项目应用的,大家试试,支持多表格
jquery实现全选、反选效果及动态地添加和删除表格数据
Little_Fishs的博客
02-02 614
jquery实现全选、反选效果及动态地添加和删除数据 01.html代码： <div class="box"> <div class="wrap"> <button id="addBtn">添加单行信息</button> <!-- 表格主体 --> ...
Jquery ajax动态添加两个并列列表
qq_35846533的博客
04-12 431
大概是这样 序号 数值 序号 数值 1 张珊 2 张三 3 张珊 4 张三 5 张珊 6 张三 //查询数据 function selectNewData(){ $.ajax({ type: "POST",//方法类型 dataType: "json",//预期服务器返回的数据类型 url: "form/selec...
[基于动态加载元素的全选与反选] Jquery 全选反选 （jquery版本有差异）
bobyswise的博客
05-25 330
$("#checkAll").on("click",function() {             // res=$(this).is(":checked");             if($(this).is(":checked")){                 $("input[name='list[]']").prop("checked","true");  /***低版本p
纯JS/JQuery实现列表的动态新增、删除和修改+全选和取消全选操作
YangXin94的博客
11-04 4519
最近学了JS和JQuery，并且写出了列表的动态增加和删除还有修改的操作，现在我就来分享给大家 演示地址 点击这里查看页面效果 JS/JQuery代码 全选/取消全选 // 多选框的点击操作 // 默认样式 $(".list th:first").append("<label for='check' id='show'>全选</label>"); $("#check").click(function() { if(this.checked) {
jQuery实现动态添加和删除（点击按钮添加在页面添加和删除元素）
祈澈菇凉
01-26 7617
1：点击添加按钮弹出弹框，form表单可以填写相关的信息 2：点击保存按钮，相关信息会显示在界面的列表里 3：鼠标滑动界面列表的标签，会出现删除按钮的图标，点击删除成功 4：代码如下，可以根据需要自行修改（可能会有多余的代码，但是不会影响效果） &lt;!DOCTYPE html&gt; &lt;html&gt; ...
jQuery添加或删除元素
最新发布
m0_74913905的博客
04-17 1022
jQuery的宗旨：写的更少，做得更多！今天分享四种添加元素与两种删除元素。
jQuery全选技巧：排除全选框，tbody input标签操作实现
总结起来，这篇文章提供了两种不同的方式来实现表格复选框的全选/取消全选功能，利用了JavaScript和jQuery的强大功能，特别是动态数组管理和事件监听。通过这个实例，读者可以更好地理解如何在网页中处理这种常见的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值