动态表格

最新推荐文章于 2025-05-08 18:56:49 发布

淡蓝色的狼

最新推荐文章于 2025-05-08 18:56:49 发布

阅读量858

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： js jQuery

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/qq_36616023/article/details/94405870

前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用纯JavaScript和jQuery两种方式实现购物车功能的方法，包括商品的添加、删除、全选、反选等操作，展示了具体的代码实现和效果预览。

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

动态模拟实现购物车的功能

方法1：js实现：

效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				background: lavenderblush;
			}
		</style>
		<script type="text/javascript">
			function addrow(){
				var idV = document.getElementById("id").value
				var nameV = document.getElementById("name").value
				var priceV = document.getElementById("price").value;
				
				var td0=document.createElement("td");
				td0.innerHTML='<input type="checkbox" checked="checked" name="tdBox"/>'
				var td1=document.createElement("td");
				td1.innerText=idV;
				var td2=document.createElement("td");
				td2.innerText=nameV;
				var td3=document.createElement("td");
				td3.innerText=priceV;
				var td4=document.createElement("td");
				td4.innerHTML='<a href="javascript:void(0)" onclick="delRow(this);">delete</a>';
				//alert(td3.value);
				
				var tr0=document.createElement("tr");
				tr0.appendChild(td0);
				tr0.appendChild(td1);
				tr0.appendChild(td2);
				tr0.appendChild(td3);
				tr0.appendChild(td4);
				
				
				var tb0=document.getElementById("tb");
				tb0.appendChild(tr0);
				
			}
			function delRow (row_a) {
				var tb= document.getElementById("tb");
				var row=row_a.parentNode.parentNode;
				tb.removeChild(row);
			}
			
			function deleleRow(){
			
				var boxs = document.getElementsByName("tdBox");
				//
				for(var i=0;i<boxs.length;i){
					if(boxs[i].checked){
						delRow(boxs[i]);
					}
					else{
						i++;
					}
				}
			}
			function reverseSelect(){
				var boxs = document.getElementsByName("tdBox");
				for(var i=0;i<boxs.length;i++){
					boxs[i].checked=!boxs[i].checked;
				}
				var box1 = document.getElementsByName("Box");
				var tag=1;
				for(var i=0;i<boxs.length;i++){
					if(!boxs[i].checked){
						tag=0;
					}
				}
				if(tag){
					box1[0].checked=true;
				}
				else{
					box1[0].checked=false;
				}
			}
			function sel(sel_all){
				var boxs = document.getElementsByName("tdBox");
				var tag=1;
				for(var i=0;i<boxs.length;i++){
					if(!boxs[i].checked){
						tag=0;
					}
				}
				if(tag){
					for(var i=0;i<boxs.length;i++){
						boxs[i].checked=false;
					}	
				}
				else{
					for(var i=0;i<boxs.length;i++){
						boxs[i].checked=true;
					}
				}
			}
		</script>
	</head>
	<body>
		<center>
			id:<input type="text" id='id'/>
			price:<input type="text" id='price'/>
			name:<input type="text" id='name'/>
		</center>
		<hr size="4"/>
		<table align="center" border="1px" width="500px">
			<thead>
				<tr>
					<td>
						<input type="checkbox" checked="checked"  onclick="sel(this)" name="Box"/>全选
					</td>
					<td>
						id
					</td>
					<td>
						name
					</td>
					<td>
						price
					</td>
					<td>
						delete
					</td>
				</tr>
			</thead>
			<tbody id='tb'>
				<tr>
					<td>
						<input type="checkbox" checked="checked" name="tdBox"/>
					</td>
					<td>
						1
					</td>
					<td>
						苹果
					</td>
					<td>
						$1.22
					</td>
					<td>
						<a href="#" onclick="delRow(this)">delete</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" checked="checked" name="tdBox"/>
					</td>
					<td>
						2
					</td>
					<td>
						梨
					</td>
					<td>
						$1.58
					</td>
					<td>
						<a href="#" onclick="delRow(this)">delete</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" checked="checked" name="tdBox"/>
					</td>
					<td>
						3
					</td>
					<td>
						奇异果
					</td>
					<td>
						$5.22
					</td>
					<td>
						<a href="#" onclick="delRow(this)">delete</a>
					</td>
				</tr>
			</tbody>
		</table>
		<center>
			<input type="button" value="添加" onclick="addrow();" />
			<input type="button" value="删除选中" onclick="deleleRow();" />
			<input type="button" value="反选" onclick="reverseSelect();" />
		</center>
	</body>
</html>

方法2：jquery实现
效果图：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				background-color: #FFF0F5;
			}
		</style>

	</head>

	<body>
		<center>
			name:<input type="text" name="name" id="name" value="" /> price:
			<input type="text" name="price" id="price" value="" />
			<input type="button" value="add" style="margin-left: 30px;" />
		</center>
		<hr size="3" />
		<table border="1" bordercolor="orange" cellspacing="0" width="70%" align="center">
			<tr bgcolor="lightblue" align="center">
				<td><b> &nbsp;&nbsp;&nbsp;&nbsp; </b></td>
				<td><b> Id </b></td>
				<td><b> Name </b></td>
				<td><b> Price </b></td>
				<td><b> Count </b></td>
				<td><b> Total_Price </b></td>
				<td><b> Delete </b> </td>
			</tr>
			<tbody id="tbody" align="center">
				<tr>
					<td> <input type="checkbox" /> </td>
					<td>1</td>
					<td>Iphone6</td>
					<td>5000</td>
					<td><input type="button" value="-" /><input type="text" size="4" value="1" /><input type="button" value="+" /></td>
					<td>5000</td>
					<td> <input type="button" value="delete" class="delete" /> </td>
				</tr>
				<tr>
					<td> <input type="checkbox" /> </td>
					<td>2</td>
					<td>Iphone7</td>
					<td>6000</td>
					<td><input type="button" value="-" /><input type="text" size="4" value="1" /><input type="button" value="+" /></td>
					<td>6000</td>
					<td> <input type="button" value="delete" class="delete" /> </td>
				</tr>
				<tr>
					<td> <input type="checkbox" /> </td>
					<td>3</td>
					<td>Ipad</td>
					<td>6000</td>
					<td><input type="button" value="-" /><input type="text" size="4" value="1" /><input type="button" value="+" /></td>
					<td>6000</td>
					<td> <input type="button" value="delete" class="delete" /> </td>
				</tr>
			</tbody>
		</table>
		<center>
			<input type="button" name="selete_all" id="selete_all" value="selete all" style="margin: 20px;" />
			<input type="button" name="del_selete_all" id="del_selete_all" value="del_selete all" style="margin: 20px;" />
			<input type="button" name="反选" id="reserve_all" value="reserve_all" style="margin: 20px;" />
		</center>
	</body>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		/*add*/
		$(":button[value=add]").click(function() {

			var idV;
			//alert($("#tbody tr:last td:eq(1)").text());
			if(isNaN(parseInt($("#tbody tr:last td:eq(1)").text()))) {
				idV = 1;
			} else {
				var num = parseInt($("#tbody tr:last td:eq(1)").text());
				idV = num + 1;
			}
			var nameV = $("#name").val();
			var priceV = $("#price").val();
			var td1 = "<td><input type='checkbox'/></td>";
			var td2 = "<td>" + idV + "</td>";
			var td3 = "<td>" + nameV + "</td>";
			var td4 = "<td>" + priceV + "</td>";
			var td5 = "<td><input type='button' value='-' /><input type='text' size='4' value='1' /><input type='button' value='+' /></td>";
			var td6 = "<td>" + priceV + "</td>";
			var td7 = "<td> <input type='button' value='delete' class='delete'/> </td>"
			$("#tbody").append("<tr></tr>");
			$("tbody tr:last").append(td1).append(td2).append(td3).append(td4).append(td5).append(td6).append(td7);
		})
		$("#reserve_all").click(function() {
			$(":checkbox").each(function(index) {
				if($(this).prop("checked")) {
					$(this).prop("checked", false)
				} else {
					$(this).prop("checked", true)
				}
			})
		})

		$("#selete_all").click(function() {
			var tag = 1;
			$(":checkbox").each(function(index) {
				if($(this).prop("checked")) {

				} else {
					tag = 0;
				}
			})
			if(tag) {
				$(":checkbox").each(function(index) {
					$(this).prop("checked", false)
				})
			} else {
				$(":checkbox").each(function(index) {
					$(this).prop("checked", true)
				})
			}
		})

		$(".delete").live('click', function() {
			$(this).parent().parent().remove();
			$(":checkbox").each(function(index) {
				$(this).parent().next().text(function(i, origText) {
					return index + 1;
				})
			})
		})

		$("#del_selete_all").live('click', function() {
			$(":checkbox").each(function(index) {
				if($(this).prop("checked")) {
					$(this).parent().parent().remove();
				}
			})
			$(":checkbox").each(function(index) {
				$(this).parent().next().text(function(i, origText) {
					return index + 1;
				})
			})
		})

		$(":button[value='-']").live('click', function() {
			var num = parseInt($(this).next().val()) - 1;
			if(num <= 0) {
				$(this).parent().parent().remove();
				$(":checkbox").each(function(index) {
					$(this).parent().next().text(function(i, origText) {
						return index + 1;
					})
				})
			} else {
				$(this).next().val(function(i, origText) {
					return num;
				});
				if(num <= 0) {
					$(this).parent().parent().remove();
				} else {
					var price = parseInt($(this).parent().prev().text());
					price *= num;
					$(this).parent().next().text(function(i, origText) {
						return price;
					})
				}
			}

		});
		$(":text:gt(1)").live('blur', function() {
			var value = parseInt($(this).val());
			//alert(value);
			if(value == 0) {
				$(this).parent().parent().remove();
				$(":checkbox").each(function(index) {
					$(this).parent().next().text(function(i, origText) {
						return index + 1;
					})
				})
			} else if(isNaN(value)) {
				$(this).parent().parent().remove();
				$(":checkbox").each(function(index) {
					$(this).parent().next().text(function(i, origText) {
						return index + 1;
					})
				})
			} else {
				var prices = parseInt($(this).parent().prev().text());
				$(this).parent().next().text(prices * value);
			}

		})
		$(":button[value='+']").live('click', function() {
			var num = parseInt($(this).prev().val()) + 1;
			$(this).prev().val(function(i, origText) {
				return num;
			});
			var price = parseInt($(this).parent().prev().text());
			price *= num;
			//alert(price);
			$(this).parent().next().text(function(i, origText) {
				return price;
			})
		});
	</script>

</html>