前端实现增删改查

赋能大师兄

已于 2022-03-27 22:28:57 修改

阅读量8.7k

点赞数 10

分类专栏：软体剑法篇文章标签： js HTML5 javascript

于 2021-10-25 19:31:00 首次发布

本文链接：https://blog.csdn.net/qq_39543984/article/details/88673357

版权

软体剑法篇专栏收录该内容

21 篇文章 5 订阅

订阅专栏

首先需要下载jQuery插件 Download jQuery | jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.2.min.js" ></script>
		<script>
			//表单验证+添加
			function save () {
				//获取值
				$("span").html("");
				var name = $("#name").val();
				var price =$("#price").val();
				var num =$("#num").val();
				var type =$("#type option:selected").text();
				var sum = price * num ;
				//表单验证
				if(name.length<2||name.length>20){
					$("#name_span").html("*商品名称不能少于两个字符").css("color","red");
					return;
				}
				if(price =="" || price == undefined){
					$("#price_span").html("*商品价格不能为空").css("color","red");
					return;
				}
				if(num.length<0){
					$("#num_span").html("*商品价格必须大于0").css("color","red");
					return;
				}
				//添加
				$("table").append("<tr><td><input type='checkbox' id='qxx'></td><td>"+name+"</td><td>"+price+"</td><td>"+num+"</td><td>"+type+"</td><td>"+sum+"</td><td><button onclick='del(this)'>删除</button></td></tr>");
			}
			//删除
			function del (a) {
				if (confirm("您是否删除本条数据！！！")) {
					$(a).parent().parent().remove();
				}				
			}
			//批量删除
			function dellist () {
				var ids=$("#qxx:checked");
				if (ids.length==0) {
					alert("请选择一条数据");
				}
				ids.each(function  () {
					$(this).parent().parent().remove();
				})
			}
			//全选
			function qx () {
				var ids = $(":checkbox");
				ids.prop("checked",true);				
			}
			//反选
			function fx () {
				var ids = $(":checkbox");
				ids.prop("checked",false);				
			}
		</script>
	</head>
	<body>
		<div style="margin-left: 50px;margin-top: 30px;">
			商品名称：<input type="text" id="name" />
					<span id="name_span"></span><br>
			商品价格：<input id="price" />
					<span id="price_span"></span><br>
			商品数量：<input id="num" />
					<span id="num_span"></span><br>
			商品类型：<select id="type">
						<option>大头</option>
						<option>丁壳</option>
					</select><br>
			<button onclick="save()">确定</button>			
		</div>
		<div style="margin-left: 50px;margin-top: 30px;">
			<button onclick="qx()">全选</button>
			<button onclick="fx()">反选</button>
			<button onclick="dellist ()">批量删除</button>
			<table style="padding: 1px;width: 700px;" border="1">
				<tr style="background-color: gray;" align="center">
					<td>编号</td>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>商品数量</td>
					<td>商品类型</td>
					<td>小计</td>
					<td>删除</td>
				</tr>
			</table>
		</div>
	</body>
</html>