jQuery实现简单购物车案例
效果图：
实现全选、反选、新增⼀⾏、删除⾏（选中的多⾏删除）、复制⾏（选中的多⾏复制）、修改数量、删除的功能html⽂件：
<head>
<title>jQuery操作表格</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
tr{
height: 40px;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/gwc.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
</script>
</head>
<body>
<h3>jQuery操作表格</h3>
<hr />
input绑定onblur事件<input type="button" id="fx" value="反选" />
<input type="button" id="addRow" value="新增⼀⾏" />
<input type="button" id="delRow" value="删除⾏" />
<input type="button" id="copyRow" value="复制⾏" />
<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
<tr>
<td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td> <td width="200px">书名</td>
<td width="200px">作者</td>
<td width="200px">数量</td>
<td width="200px">操作</td>
</tr>
<tr id="">
<td><input type="checkbox" name="chk" id="" value="2"/></td>
<td>《Java编程之道》</td>
<td>wollo</td>
<td>10</td>
<td>
<input type="button" name="aa" id="" value="修改数量" onclick="change(this)"/> <input type="button" name="" id="" value="删除" onclick="del(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="3" /></td>
<td>《Python和我的故事》</td>
<td>赵⽼师</td>
<td>10</td>
<td>
<input type="button" name="" id="" value="修改数量" onclick="change(this)"/>
<input type="button" name="" id="" value="删除" onclick="del(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="4" /></td>
<td>《web开发详解》</td>
<td>张⽼师</td>
<td>30</td>
<td>
<input type="button" name="" id="" value="修改数量" onclick="change(this)"/>
<input type="button" name="" id="" value="删除" onclick="del(this)"/>
</td>
</tr>
</table>
</body>
</html>
$(function(){
//全选
$("#chks").click(function(){
var flag=$("#chks").prop("checked");
$("input[name=chk]").prop("checked",flag);
})
//单选
$("input[name=chk]").click(function(){
var flag=true;
var chk=$("input[name=chk]");
chk.each(function(){
if(!$(this).prop("checked")){
flag=false;
return;
}
})
$("#chks").prop("checked",flag);
})
//反选
$("#fx").click(function(){
var checkbox=$("input[type=checkbox]");
checkbox.each(function(){
var flag=$(this).prop("checked");
$(this).prop("checked",!flag);
})
})
/*以上全选和反选功能主要是运⽤prop("checked")属性，使⽤prop()是因为该⽅法返回的是true或false
*
全选就是若被选中，则将满⾜条件的name为chk的多选框也被选择和它⼀样的状态
由单选决定多选：主要遍历单选：each()⽅法很好⽤，如果满⾜不被勾选则结束函数，返回false，并获得全选对象，将其checked该为false * 反选：获得所有多选框，遍历，先获得原有被选中状态，获得后，在prop⽅法中后⾯设置选择状态⼀栏取反即可。*/
//新增⼀⾏：先获得表格对象，然后append
$("#addRow").click(function(){
var ta=$("#ta");
ta.append('<tr id="">'+
'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
'<td>《Java编程之道》</td>'+
'<td>wollo</td>'+
'<td>10</td>'+
'<td>'+
'<input type="button" name="aa" id="" value="修改数量" onclick="change(this)"/>'+
'<input type="button" name="" id="" value="删除" onclick="del(this)"/>'+
'</td>'+
'</tr>')
})
//删除⾏：先获得所有被选中的name=chk的多选框，然后获得该多选框的⽗节点td的⽗节点tr
$("#delRow").click(function(){
var chkk=$("input[name=chk]:checked");/*获得所有被选中的name=chk的多选框*/
if(chkk.length==0){
alert("⾄少选择⼀⾏");
}else{
//执⾏删除⾏操作
chkk.parent().parent().remove();
}
})
//复制⾏：先获得所有被选中的name=chk的多选框，先复制，使⽤clone()⽅法，再粘贴，也就是append⽅法
$("#copyRow").click(function(){
var chkk=$("input[name=chk]:checked");
if(chkk.length==0){
alert("⾄少选择⼀⾏");
}else{
}else{
//执⾏copy
//复制
var tr=chkk.parent().parent().clone();
//黏贴
$("#ta").append(tr);
}
})
})
//修改的数量：以下是javascript写法，在javascript的函数中使⽤$()将js对象转成了jquery对象
function change(th){/**eq()的索引是从0开始的，所以在获得修改数量的button后，需要获得它的⽗节点的⽗节点tr，然后从tr出发获得所有的⼦节点，取第四个⼦节点，将其内容变成text⽂本框以及⿏标失去焦点事件*/
$(th).parent().parent().children().eq(3).html("<input type='text' size='3px' onblur='bul(this)'/>")
}
//onblur失去焦点引发的bul()事件
function bul(th){/*此处th是javascript对象，所以取值要使⽤value⽽不是val()*/
$(th).parent().parent().children().eq(3).html(th.value);
}
//删除的操作：获得th本⾝的值，由于th代表的是删除那个button所以，需要获得它的⽗节点td的⽗节点tr，才能删除整个tr，否则只能删除那个按钮
function del(th){
$(th).parent().parent().remove();
}
最后导⼊jquery1.9.1⽂件部分效果图：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论