<!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 οnclick='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 οnclick="save()">确定</button>
</div>
<div style="margin-left: 50px;margin-top: 30px;">
<button οnclick="qx()">全选</button>
<button οnclick="fx()">反选</button>
<button οnclick="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>
8281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
