<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!--
1.query 引入
2.添加
3.删除
单个删除。删除的是一行，标签是tr
4.查找
-->
<style type="text/css">
img {
height: 60px;
}
</style>
</head>
<body>
<input type="button" name="" id="piliang" value="批量删除" />
<table border="1px" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td>序号</td>
<td>水果图片</td>
<td>水果名</td>
<td>价格</td>
<td>数量</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<td>1</td>
<td><img src="img/b.png" /></td>
<td>榴莲</td>
<td>25</td>
<td>1</td>
<td><input type="button" name="" id="" value="删除" onclick="dele(this)" /></td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<td>2</td>
<td><img src="img/b.png" /></td>
<td>臭豆腐</td>
<td>10</td>
<td>2</td>
<td><input type="button" name="" id="" value="删除" onclick="dele(this)" /></td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" /></td>
<td>3</td>
<td><img src="img/b.png" /></td>
<td>石榴</td>
<td>5</td>
<td>1</td>
<td><input type="button" name="" id="" value="删除" onclick="dele(this)" /></td>
</tr>
</table>
<input type="button" value="添加" id="bt2"/>
<div class="add">
序号：<input type="text" id="id"/><br>
名称：<input type="text" id="name"/><br>
价格：<input type="text" id="price"/><br>
数量：<input type="text" id="num"/><br>
<input type="button" value="保存" id="save"/>
</div>
<script type="text/javascript">
$(".add").hide();
$("#bt2").click(function(){
$(".add").show();
})
function dele(t) {
//根据当前的按钮，找到相应的行
var tr = t.parentNode.parentNode;
tr.remove();
}
//批量删除
$("#piliang").click(function(){
//获取所有被选中的复选框
var cbs = $("[type=checkbox]:checked");
//提示
if (cbs.length==0) {
alert("请至少选一个！")
return;
}
for (var i = 0;i<cbs.length;i++) {
var cb = cbs[i];
//取出来时复选框
//根据复选框找到对应的行，然后删除
cb.parentNode.parentNode.remove();
}
});
//保存
$("#save").click(function(){
//取得输入框的值，验证
var id = $("#id").val();
var name = $("#name").val();
var price = $("#price").val();
var num = $("#num").val();
//添加到表格
var tr = "<tr><td><input type='checkbox' /></td><td>"+id+"</td><td><img src='img/b.png' /></td><td>"+name+"</td><td>"+price+"</td><td>"+num+"</td><td><input type='button' value='删除' onclick='dele(this)' /></td></tr>";
$("table").append(tr);
//让添加页面消失
$(".add").hide();
});
</script>
</body>
</html>
批量删除，删除，添加
猜你喜欢
转载自blog.csdn.net/u010872950/article/details/83105601
今日推荐
周排行