jQuery实现类似于购物车操作

先看页面的代码，后面会详细写每一个操作的实现。

<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.12.3.min.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="修改数量" οnclick="chnum(this)" />

					<input type="button" name="" id="" value="删除" οnclick="re(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="aa" id="" value="修改数量" οnclick="chnum(this)"/>

					<input type="button" name="" id="" value="删除"  οnclick="re(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="aa" id="" value="修改数量" οnclick="chnum(this)"/>

					<input type="button" name="" id="" value="删除" οnclick="re(this)"/>

				</td>

			</tr>

		</table>

	</body>

</html>

整体样式：

1.全选操作：

	/*实现全选功能*/

	$("#chks").click(function(){

		var flag=$(this).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;

			}

		})

		$("#chks").prop("checked",flag);

	})

这里我们用this代表我们选中的那个表单，然后去获取checked属性，然后直接去用获取名称的方式得到我们需要的表单，因为prop的返回值是Boolean，所以我们将其checked的属性赋值为flag。这仅仅只是将全选框的功能实现了，并没有实习后续的操作，因此我们继续将，表单全部选中的情况下，全选框也会变成选中的这一效果实现。我们用名称的范式去获取下面的表单，并创建和设置flag的值为true，.each的方法是表是遍历的意思。我们得到的每一个表单都需要去检测，当全部被勾选，执行下一步将全选框的checked属性赋值为flag。

反选操作：

	/*实现反选功能*/

	$("#fx").click(function(){

		var chx=$("input[name=chk]");

		chx.each(function(){

			//获取多选框的初始状态

			var flag=$(this).prop("checked");

			$(this).prop("checked",!flag);

            $("#chks").prop("checked",false);

		})

	})

反选功能我们只需要得到下面的表单，并将它们的勾选框取反。

新增一行：

/*新增一行*/

	$("#addRow").click(function(){

		var addone=$("#ta");

		addone.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="修改数量" οnclick="chnum(this)" />&nbsp'+

				'<input type="button" name="" id="" value="删除" οnclick="re(this)"/>'+

			'</td>'+

		'</tr>');

	})

这里我们是以第一行的表单为例，去新增的。用到了append方法，注意是在哪一部分去添加。我们获取的是table，直接在table表的最后面一行加。如果不清楚append方法，可以去append方法看看。

删除行：

	/*删除行*/

	$("#delRow").click(function(){

		var delRow=$("input[name=chk]:checked");

		if (delRow.length==0) {

			alert("至少选择一行!!")

		} else{

			delRow.parent().parent().remove();

		}

	})

由于删除行我们是针对整体进行操作的，因此我们需要表单是在被勾选的情况下才能去进行删除行操作。删除行我们需要得到他父类的父类，然后去删除整个tr

复制行操作：

/*复制行*/

	$("#copyRow").click(function(){

		var copyRow=$("input[name=chk]:checked");

		if (copyRow.length==0) {

			alert("至少选择一行!!")

		} else{

			//复制(clone的方法)

			var tr=copyRow.parent().parent().clone();

			//粘贴

			$("#ta").append(tr);

		}

	})

和删除行一样，我们需要在表单是在被勾选的情况下才能去进行复制行操作。这里我们用到了clone的方法。复制分为俩步，一步是clone，一步是粘贴，也可以理解陈追加（append）。

由于修改数量，以及删除，修改数量之后光标消失事件都是会有表单是在复制行之后再去进行操作，一次我们这三种方法就用js函数进行操作：

/*修改数量*/

function chnum(th){

	var pre=$(th).parent().parent();

	pre.children().eq(3).html("<input type='number' οnblur='xg(this)'/> ");

}

/*修改数量之后，失去焦点*/

function xg(th){

	var pre=$(th).parent().parent();

	pre.children().eq(3).html(th.value);

}

/*删除操作*/

function re(th){

	var pre=$(th).parent().parent();

	pre.remove();

}

可以看得出来，三种方法类似，修改数量先更改表单类型，然后再去恢复。删除直接得到tr，然后直接删除。

gwc.js完整代码：



$(function(){

	/*实现全选功能*/

	$("#chks").click(function(){

		var flag=$(this).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;

			}

		})

		$("#chks").prop("checked",flag);

	})

	/*实现反选功能*/

	$("#fx").click(function(){

		var chx=$("input[name=chk]");

		chx.each(function(){

			//获取多选框的初始状态

			var flag=$(this).prop("checked");

			$(this).prop("checked",!flag);

            $("#chks").prop("checked",false);

		})

	})

	/*新增一行*/

	$("#addRow").click(function(){

		var addone=$("#ta");

		addone.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="修改数量" οnclick="chnum(this)" />&nbsp'+

				'<input type="button" name="" id="" value="删除" οnclick="re(this)"/>'+

			'</td>'+

		'</tr>');

	})

	/*删除行*/

	$("#delRow").click(function(){

		var delRow=$("input[name=chk]:checked");

		if (delRow.length==0) {

			alert("至少选择一行!!")

		} else{

			delRow.parent().parent().remove();

		}

	})

	/*复制行*/

	$("#copyRow").click(function(){

		var copyRow=$("input[name=chk]:checked");

		if (copyRow.length==0) {

			alert("至少选择一行!!")

		} else{

			//复制(clone的方法)

			var tr=copyRow.parent().parent().clone();

			//粘贴

			$("#ta").append(tr);

		}

	})

})

/*修改数量*/

function chnum(th){

	var pre=$(th).parent().parent();

	pre.children().eq(3).html("<input type='number' οnblur='xg(this)'/> ");

}

/*修改数量之后，失去焦点*/

function xg(th){

	var pre=$(th).parent().parent();

	pre.children().eq(3).html(th.value);

}

/*删除操作*/

function re(th){

	var pre=$(th).parent().parent();

	pre.remove();

}

效果：

巴特西

jQuery实现类似于购物车操作

最新文章

热门文章