jQuery实现简单购物车案例

最新推荐文章于 2024-04-19 10:15:13 发布

程程程程yyyy

最新推荐文章于 2024-04-19 10:15:13 发布

阅读量3.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_44053632/article/details/99684708

前端专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用jQuery操作表格，包括全选、反选、新增、删除、复制行及修改单元格内容等功能，通过实例展示了具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述
实现全选、反选、新增一行、删除行（选中的多行删除）、复制行（选中的多行复制）、修改数量、删除的功能
html文件：

<html>
	<head>
		<title>jQuery操作表格</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			tr{
				height: 40px;
			}
		</style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/gwc.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			
		</script>
	</head>
	<body>
		<h3>jQuery操作表格</h3>
		<hr />
		<input type="button" id="fx" value="反选" />
		<input type="button" id="addRow" value="新增一行" />
		<input type="button" id="delRow" value="删除行" />
		<input type="button" id="copyRow" value="复制行" />
		<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
			<tr>
				<td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td>
				<td width="200px">书名</td>
				<td width="200px">作者</td>
				<td width="200px">数量</td>
				<td width="200px">操作</td>
			</tr>
			<tr id="">
				<td><input type="checkbox" name="chk" id="" value="2"/></td>
				<td>《Java编程之道》</td>
				<td>wollo</td>
				<td>10</td>
				<td>
					<input type="button" name="aa" id="" value="修改数量"  onclick="change(this)"/>
					<input type="button" name="" id="" value="删除" onclick="del(this)"/>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="" value="3" /></td>
				<td>《Python和我的故事》</td>
				<td>赵老师</td>
				<td>10</td>
				<td>
					<input type="button" name="" id="" value="修改数量" onclick="change(this)"/>
					<input type="button" name="" id="" value="删除" onclick="del(this)"/>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="" value="4" /></td>
				<td>《web开发详解》</td>
				<td>张老师</td>
				<td>30</td>
				<td>
					<input type="button" name="" id="" value="修改数量" onclick="change(this)"/>
					<input type="button" name="" id="" value="删除" onclick="del(this)"/>
				</td>
			</tr>			
		</table>
	</body>
</html>

js文件

$(function(){
	//全选
	$("#chks").click(function(){
		var flag=$("#chks").prop("checked");
		$("input[name=chk]").prop("checked",flag);
	})
	//单选
	$("input[name=chk]").click(function(){
		var flag=true;
		var chk=$("input[name=chk]");
		chk.each(function(){
			if(!$(this).prop("checked")){
				flag=false;
				return;
			}			
		})
		$("#chks").prop("checked",flag);
	})
	//反选
	$("#fx").click(function(){
		var checkbox=$("input[type=checkbox]");
		checkbox.each(function(){
			var flag=$(this).prop("checked");
			$(this).prop("checked",!flag);
		})
	})
	/*以上全选和反选功能主要是运用prop("checked")属性，使用prop()是因为该方法返回的是true或false
	 * 
	 全选就是若被选中，则将满足条件的name为chk的多选框也被选择和它一样的状态
	 
	 由单选决定多选：主要遍历单选：each()方法很好用，如果满足不被勾选则结束函数，返回false，并获得全选对象，将其checked该为false
	 
	 * 反选：获得所有多选框，遍历，先获得原有被选中状态，获得后，在prop方法中后面设置选择状态一栏取反即可。*/
	
	//新增一行:先获得表格对象，然后append
	$("#addRow").click(function(){
		var ta=$("#ta");
		ta.append('<tr id="">'+
				'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
				'<td>《Java编程之道》</td>'+
				'<td>wollo</td>'+
				'<td>10</td>'+
				'<td>'+
					'<input type="button" name="aa" id="" value="修改数量"  onclick="change(this)"/>'+
					'<input type="button" name="" id="" value="删除" onclick="del(this)"/>'+
				'</td>'+
			'</tr>')
	})
	//删除行：先获得所有被选中的name=chk的多选框，然后获得该多选框的父节点td的父节点tr
	$("#delRow").click(function(){
		var chkk=$("input[name=chk]:checked");/*获得所有被选中的name=chk的多选框*/
		if(chkk.length==0){
			alert("至少选择一行");
		}else{
			//执行删除行操作
			chkk.parent().parent().remove();
		}
	})
	//复制行:先获得所有被选中的name=chk的多选框，先复制，使用clone()方法，再粘贴，也就是append方法
	$("#copyRow").click(function(){
		var chkk=$("input[name=chk]:checked");			
		if(chkk.length==0){
			alert("至少选择一行");
		}else{
			//执行copy
			//复制
			var tr=chkk.parent().parent().clone();
			//黏贴
			$("#ta").append(tr);			
		}
	})
})

//修改的数量：以下是javascript写法，在javascript的函数中使用$()将js对象转成了jquery对象
function change(th){/**eq()的索引是从0开始的，所以在获得修改数量的button后，需要获得它的父节点的父节点tr，然后从tr出发获得所有的子节点，取第四个子节点，将其内容变成text文本框以及鼠标失去焦点事件*/
	$(th).parent().parent().children().eq(3).html("<input type='text' size='3px' onblur='bul(this)'/>")
}

//onblur失去焦点引发的bul()事件
function bul(th){/*此处th是javascript对象，所以取值要使用value而不是val()*/
	$(th).parent().parent().children().eq(3).html(th.value);
}

//删除的操作:获得th本身的值，由于th代表的是删除那个button所以，需要获得它的父节点td的父节点tr，才能删除整个tr，否则只能删除那个按钮
function del(th){
	$(th).parent().parent().remove();
}

最后导入jquery1.9.1文件
部分效果图：
在这里插入图片描述