input禁止后怎么实现复制功能_（变强、变秃）Java从零开始之JQuery购物车功能实操...

最新推荐文章于 2022-08-22 13:58:36 发布

留德小罗

最新推荐文章于 2022-08-22 13:58:36 发布

阅读量96

点赞数

文章标签： input禁止后怎么实现复制功能

本文链接：https://blog.csdn.net/weixin_42344284/article/details/112181662

版权

今天实现了购物车的一些功能，包括删除添加，复制，修改值，全选，反选等。

以下是代码跟配图：

js代码部分：通过各种事件实现了按钮的具体功能

$(function(){
	//全选功能
	$("#chks").click(function(){
		var flag = $("#chks").prop("checked");
		$("input[name=chk]").prop("checked",flag);
	})
	
	//单选全选中， 全选框自动打勾
	$(document).on('click',"input[name=chk]",function(){
		var flag = true;
		$("input[name=chk]").each(function(){
			if(!$(this).prop("checked")){
				return flag=false;
			}
		})
		$("#chks").prop("checked",flag);
	})
	
	//反选功能
	$("#fx").click(function(){
		var flag =true;
		var triggle = true;
		$("input[name=chk]").each(function(){
			//保存 勾选状态
			flag=$(this).prop("checked")
			//将勾选状态 取反
			$(this).prop("checked",!flag);
			// 勾选状态被取反， 所以  全选的情况被改成了选不选情况， 所以当被选中flag=true时 全选按钮应该false
			if(flag){
				triggle=false;
			}
		})
		$("#chks").prop("checked",triggle);
	})
	
	//新增行功能
	$("#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="修改数量"  />&nbsp;'+
					'<input type="button" name="dd" id="" value="删除" />'+
				'</td>'+
			'</tr>');
	})
	
	//删除功能
	$("#delRow").click(function(){
		//checked属性只有一个值 checked（被选中）即有这个属性就是被选中状态
		var del = $("input[name=chk]:checked");
		if(del.length==0){
			alert("至少选择一行");
		}else{
			//底层自动遍历每个元素 进行操作
			del.parent().parent().remove();
		}
	})
	
	
	//复制行
	$("#copyRow").click(function(){
		var copy = $("input[name=chk]:checked");
		if(copy.length==0){
			alert("至少选择一行");
		}else{
			//复制
			var tr = copy.parent().parent().clone();
			//黏贴
			$("#ta").append(tr);
		}
	})
	
	//修改数量
	$(document).on('click',"input[name=aa]",function(){
		var trNum = $(this).parent().prev();
		trNum.html("<input type='text' size='3px' name='ipNum' onblur='bu1(this)' />");
		
	})

	//删除操作
	$(document).on('click',"input[name=dd]",function(){
		$(this).parent().parent().remove();
	})
	
	
})


//修改数量子方法， 失焦事件，获得值
function bu1(th){
	var val = $(th).val();
	if(""!=val){
		$(th).parent().html(val);
	}else{
		$(th).parent().html('0');
	}
		
}

这是HTML页面的样板：

<html>
	<head>
		<title>jQuery操作表格</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			tr{
				height: 40px;
			}
		</style>
	 	<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
		<script type="text/javascript" src="js/gwc.js" ></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="修改数量"  />
					<input type="button" name="dd" id="" value="删除" />
				</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="aa" id="" value="修改数量" />
					<input type="button" name="dd" id="" value="删除" />
				</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="aa" id="" value="修改数量" />
					<input type="button" name="dd" id="" value="删除" />
				</td>
			</tr>			
		</table>
	</body>
</html>

页面效果

点击全选：

反选：

新增一行：

删除行：

留德小罗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input禁止后怎么实现复制功能_（变强、变秃）Java从零开始之JQuery购物车功能实操...

今天实现了购物车的一些功能，包括删除添加，复制，修改值，全选，反选等。以下是代码跟配图：js代码部分：通过各种事件实现了按钮的具体功能$(function(){ //全选功能 $("#chks").click(function(){ var flag = $("#chks").prop("checked"); $("input[name=chk]").prop("checked",fl...
复制链接

扫一扫