JQuery可以去网上下载。

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

jquery编写购物篮



<!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>

相关文章:

  • 2021-05-08
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-14
  • 2022-01-09
  • 2021-09-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-12-05
  • 2021-09-06
  • 2022-02-28
相关资源
相似解决方案