快捷導(dǎo)航

jquery實現(xiàn)select選中行、列合計示例

更新時間：2014年04月25日 15:24:04 作者：

這篇文章主要介紹了jquery如何實現(xiàn)select選中行、列合計示例 ,需要的朋友可以參考下

Jquery 方法

 
$( 
function () { 

//頁面加載時計算人員統(tǒng)計表合計值 
calcSum(); 

}); 

//合計行計算 
/* 
以合計行為中間變量 
每個單元格與該列合計行相加 
得到每列合計 
*/ 
function trVisible(chk, index) { 

var disValue = $("#Tr" + index).css("display"); 
if (chk.checked) { 

$("#Tr" + index).css("display", "block"); 
} 
else { 
$("#Tr" + index).css("display", "none"); 
} 
calcSum(); 
} 
function calcSum() { 

//合計行賦初始值0 
$("#trSum").each(function () { 
$(this).find("td").each(function () { 
if ($(this).index() != 0) { 
$(this).text("0"); 
} 
}); 
}); 

$("#tabrytj").find("tr").each(function () { 
var trDis = $(this).css("display"); 
//隱藏行不參與計算 
if (trDis == "block") { 
$(this).find("td").each(function () { 
var index = $(this).index(); 
if (index >= 1) { 
var tdValue = $("#trSum").find("td:eq(" + index + ")").text(); 
//totalSum += parseFloat($(this).text()); 
$("#trSum").find("td:eq(" + index + ")").text(parseFloat(tdValue) + parseFloat($(this).text())); 
} 
}); 
} 
}); 


} 

html語句

復(fù)制代碼代碼如下:

 
<table> 
<tr> 
<td>分公司</td> 
<td> 
<select> 
<option> 
華南分公司 
</option> 
</select> 
</td> 
<td><input type="checkbox" onclick="trVisible(this,1)" name="chk1" id="chk1" checked="checked" />張1</td> 
<td><input type="checkbox" onclick="trVisible(this,2)" checked="checked" />張2</td> 
<td><input type="checkbox" onclick="trVisible(this,3)" checked="checked" />張3</td> 
<td><input type="checkbox" onclick="trVisible(this,4)" checked="checked" />張4</td> 
<td><input type="checkbox" onclick="trVisible(this,5)" checked="checked" />張5</td> 
<td><input type="checkbox" onclick="trVisible(this,6)" checked="checked" />張6</td> 
</tr> 
</table> 



<div> 
<table border="0" class="tableinfo" id="tabrytj"> 
<tr id="Tr1" style="display:block"> 
<td>張1 </td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
</tr> 
<tr id="Tr2" style="display:block"> 
<td>張2 </td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
</tr> 
<tr id="Tr3" style="display:block"> 
<td>張23 </td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
</tr> 
<tr id="trSum"> 
<td></td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
</tr> 
</table>
</div> 