js獲取複選框的tr中的值,並且算出合計

1:首先考慮複選框存在兩種情況:一個是全選,全不選;另一個是單個選中與取消事件。

2:看實例.

<table>

<tr>

<td><input type="checkbox" title="全選" class="checkbox0" id="checkAll000" /></td>

<td>年份</td>

<td>期數</td>

<td>值</td>

</tr>

<#if olist1??>
<#list olist1 as o>

<tr year="${o.ord_year!}" iss="${o.iss!}">

<td><input type="checkbox" name="checkedid" value="${o.cus_id!}-${o.user_id!}-${o.ord_year!}-${o.iss!}" /></td>

<td>${o.ord_year!}</td>

<td>${o.iss!}</td>

<td class="vl">${o.value!}</td>

</tr>

</#list>

</#if>

<#if hjlist1??>
<#list hjlist1 as hj1>

<tr class="hj" year="${hj1.ord_year!}" iss="${hj1.iss!}">

<td>合計</td>

<td>${hj1.ord_year!</td>

<td>${hj1.iss!}</td>

<td class="hjvl" stock="200">需要算出來的值</td>

</tr>

</#list>

</#if>

</table>

3:js代碼

核心方法:

function parseCheckBox(chk){
var ccc = $(chk).prop("checked");//是否選中true/false
var year =$(chk).parents("tr").attr("year");
var iss =$(chk).parents("tr").attr("iss");
//tr中的td的值
$(chk).parents("tr").find("td[class='vl']").each(function(g){
var v = $.trim($(this).text());
if(v.length==0){
v = 0;
}
v = parseInt(v);
var edi = $.trim($(this).attr("edi"));
$(".heji").each(function(n){//合計的tr
var y = $(this).attr("year");
var i = $(this).attr("iss");
if(y==year && i == iss){
$(this).find("td[class='hjvl']").each(function(){
if($(this).attr("edi")==edi){
//庫存
var stock = $.trim($(this).attr("stock"));
if(stock.length==0){
stock=0;
}
stock = parseInt(stock);
//舊合計
var s = $.trim($(this).text());
if(s.length==0){
s=0;
}
s = parseInt(s);
if(ccc){//選中
if(v+s>0){
if((v+s)>stock){
$(this).css({"color":"red"});
}
$(this).text(v+s);
}
}else{//取消選中
if(s-v>0){
if((s-v)>stock){
$(this).css({"color":"red"});
}else{
$(this).css({"color":"black"});
}
$(this).text(s-v);
}else{
$(this).text("");
}
}
}
});
}
});
});
}

$(function(){

//全選
$("#checkAll000").click(function(){
var v = $(this)[0].checked;
$("input[name='checkedid']").each(function(){
if(!this.checked){//判斷之前是否已經選中
if (v) {
this.checked = true;
parseCheckBox($(this));
}
}else{
if (!v) {//判斷之前是否已經沒有選中
this.checked = false;
parseCheckBox($(this));
}
}
});
});
//單個複選框點擊
$("input[name='checkedid']").click(function(){
parseCheckBox($(this));
});
});

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章