-
rows 獲取table下所有tr元素
查看全部 -
script.js
查看全部 -
this.parentNode.removeChild(this)
查看全部 -
this.parentNode
查看全部 -
這樣還不夠完整，應(yīng)增加自動全選，即當(dāng)把所有物品都選上時全選按鈕自動打勾。
查看全部 -
//用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++){
//加減數(shù)量
$(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;
? ? ? ? ? ?}
? ? ? ? ??
? ? ? ? ? ?
})
//輸入數(shù)量
$(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屬性，用來存放所有的行。
查看全部 -
取兩位小數(shù)查看全部
舉報