JQuery表格操作-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39404258/article/details/79714915

本文介绍了一个使用JQuery实现的表格操作示例，包括表格的增删功能、全选及单行选择后批量删除等交互。该示例展示了如何利用JQuery简化DOM操作，提高网页应用的用户体验。

JQuery可以去网上下载。

通过JQurey实现了表格中整行删除和选中删除的功能，以及全选，全不选，新增的功能。

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
//增
$("#bu1").click(function(){
var abc = $("<tr>"
+ "<td>"
+ "<input name='' type='checkbox' class='all' />"
+ "</td>"
+ "<td>"
+ "<img src='img/computer.jpg' />"
+ "</td>"
+ "<td>￥3189元</td>"
+ "<td>"
+ "<input type='text'/>"
+ "</td>"
+ "<td><input id='but2' type='button' class='del' value='删除' /></td>"
+ "</tr>");
$("table").append(abc);

});

//全选
$("#all").click(function(){
if($("#all").attr("checked")){
$(".all").attr("checked","checked");
}
else{
$(".all").attr("checked","");
}
})

//删除单行
$(".del").live("click",function(){
$(this).parent().parent().remove();
})
//删除选中的行
$("#bu2").click(function() {
$(":checked").parent().parent().remove();
})

})
//设置check属性不管什么内容都被选中
</script>
</head>

<body>
<table width="800px" border="1" cellspacing="1" cellpadding="1">
<tr id="tr1">
<td><input type="checkbox" value="全选" class="all" id="all" />全选</td>
<td>商品信息</td>
<td>宜美惠价</td>
<td>数量</td>
<td>操作</td>
</tr>
<tr >
<td><input type="checkbox" class="all" /></td>
<td><img src="img/sang.gif"/></td>
<td> 32.9元</td>
<td width="100px"> <input type="text"/></td>
<td><input id="but1" class="del" type="button" value="删除" /></td>
</tr>
<tr >
<td><input type="checkbox" class="all" /></td>
<td><img src="img/iphone.gif" /> </td>
<td> 3339元</td>
<td > <input type="text"/></td>
<td><input id="but2" class="del" type="button" value="删除" /></td>
</tr>

</table>
<input id="bu1" type="button" value="增加" />
<input id="bu2" type="button" value="删除" />
</body>
</html>

jquery编写购物篮