-
rows 获取table下所有tr元素
查看全部 -
script.js
查看全部 -
this.parentNode.removeChild(this)
查看全部 -
this.parentNode
查看全部 -
这样还不够完整，应增加自动全选，即当把所有物品都选上时全选按钮自动打勾。
查看全部 -
//用jquery写了一遍
$(function(){
//全选
var $checkAll= $(".check-all");
var $check=$(".check");
var $checkOne=$(".check-one");
var $selectedTotal=$("#selectedTotal");
var $priceTotal=$("#priceTotal");
var $selectedViewList=$("#selectedViewList");
var $selected=$("#selected");
var $foot=$("#foot");
var tr=$("#cartTable").find("tbody").find("tr");
var $deleteAll=$("#deleteAll");
var $deleteOne=$("#cartTable").find(".delete");
var $countInput=$(".count-input");
var $price=$(".price");
var indexs=0;
$checkAll.change(function(){
if($(this).is(':checked')){
$check.prop("checked",true);
indexs=$checkOne.length;
}else{
$check.prop("checked",false);
indexs=0;
}
totol();
})
//单选
$checkOne.change(function(){
if($(this).is(':checked')){
indexs++;
}else{
indexs--;
}
if(indexs==$checkOne.length){
$checkAll.prop("checked",true);
}
if($(this).is(':checked')==false){
$checkAll.prop("checked",false);
}
totol();
})
//计算
function totol(){
var price=0;
var seleted=0;
var htmlStr='';
for(var i=0;i<tr.length;i++){
if($(tr[i]).find(".check-one").is(':checked')){
$(tr[i]).addClass("on");
price+=parseFloat($(tr[i]).find(".subtotal").html());
seleted+=parseInt($(tr[i]).find(".count-input").val())
htmlStr+='<div><img src="' + $(tr[i]).find("img").attr("src") + '"><span class="del" index="' + i + '">取消选择</span></div>';
}else{
$(tr[i]).removeClass("on");
}
}
$selectedTotal.html(seleted);
$priceTotal.html(price.toFixed(2));
$selectedViewList.html(htmlStr);
if($selectedTotal.html()==0){
$foot.removeClass("show");
}
}
$selected.on("click",function(){
if($selectedTotal.html()!=0){
$foot.toggleClass("show")
}
})
$selectedViewList.on("click",".del",function(){
var index=$(this).attr("index");
$checkOne.eq(index).trigger("click");
$(this).parent("div").empty();
})
//删除全部
$deleteAll.on("click",function(){
if($selectedTotal.html()!=0){
var conf = confirm('确定删除吗？');
if(conf){
for(var i=0;i<tr.length;i++){
if($(tr[i]).find(".check-one").is(':checked')){
$(tr[i]).empty();
}
}
}
}
})
//删除单个
$deleteOne.on("click",function(){
var confs = confirm('确定删除吗？');
if(confs){
$(this).closest("tr").empty();
}
})
for(var i=0;i<tr.length;i++){
//加减数量
$(tr[i]).on("click",function(e){
e = e || window.event;
var el = e.toElement;
var cls = $(el).prop("className");
var num=parseInt($(this).find(".count-input").val());
switch (cls) {
case 'add':
num++
$(this).find(".count-input").val(num);
$(this).find(".reduce").html("-");
Calculation($(this));
totol();
break;
case 'reduce':
if(num>1){
num--;
$(this).find(".count-input").val(num);
}
if(num<=1){
$(this).find(".reduce").html("")
num=1
}
Calculation($(this));
totol();
break;
}
})
//输入数量
$(tr[i]).find(".count-input").on("keyup",function(){
var value=parseInt($(this).val());
if(isNaN(value) || value<=1){
value=1;
$(this).closest("tr").find(".reduce").html("");
}
$(this).val(value);
if(value>1){
$(this).closest("tr").find(".reduce").html("-");
}
Calculation($(this).closest("tr"));
totol();
})
}
//单行计算
function Calculation(tr){
var price=parseFloat(tr.find(".price").html());
var num=parseInt(tr.find(".count-input").val());
var totolCont=price*num
var totol=parseFloat(totolCont.toFixed(2));
tr.find(".subtotal").html(totol);
}
//初始全选
$checkAll.prop("checked",true);
$checkAll.trigger("click");
})
查看全部 -
children childNodes 方法的不同， 以及rows属性，用来存放所有的行。
查看全部 -
取两位小数查看全部
举报