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語句
<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>
復(fù)制代碼 代碼如下:
$(
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>
您可能感興趣的文章:
- jquery操作select詳解(取值,設(shè)置選中)
- jquery中獲取select選中值的代碼
- jquery及原生js獲取select下拉框選中的值示例
- jquery控制select的text/value值為選中狀態(tài)
- jquery實現(xiàn)動態(tài)操作select選中
- jquery獲取select選中值的方法分析
- jQuery獲取select選中的option的value值實現(xiàn)方法
- 基于jquery的二級聯(lián)動菜單實現(xiàn)代碼
- jquery+json 通用三級聯(lián)動下拉列表
- jQuery結(jié)合PHP+MySQL實現(xiàn)二級聯(lián)動下拉列表[實例]
- jQuery select自動選中功能實現(xiàn)方法分析
相關(guān)文章
可輸入文字查找ajax下拉框控件 ComBox的實現(xiàn)方法
下面小編就為大家?guī)硪黄奢斎胛淖植檎襛jax下拉框控件 ComBox的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
addEventListener—jQuery的事件監(jiān)聽方法
在Javascript中,事件監(jiān)聽是非常重要的,通過事件監(jiān)聽,我們可以在用戶執(zhí)行某些操作時觸發(fā)相應(yīng)的處理程序。最初,Javascript監(jiān)聽事件的方式是addEvent。addEvent()比較麻煩,所以jQuery為我們提供了一個更為便捷的事件監(jiān)聽方法:addEventListener。2023-06-06
JQuery的Ajax中Post方法傳遞中文出現(xiàn)亂碼的解決方法
這篇文章主要介紹了JQuery的Ajax中Post方法傳遞中文出現(xiàn)亂碼的解決方法,較為深入的分析了Ajax的post方法出現(xiàn)亂碼的原因,以及具體的解決方法,需要的朋友可以參考下2014-10-10
JQuery擴展插件Validate 3通過參數(shù)設(shè)置錯誤信息
最終顯示在頁面上的錯誤分為兩種:第一種是默認錯誤信息,該信息已經(jīng)被定義在插件中了,可以手動修改。2011-09-09
jquery dataview數(shù)據(jù)視圖插件使用方法
這篇文章主要介紹了jquery dataview數(shù)據(jù)視圖插件使用方法,數(shù)據(jù)填充與視圖更新利器,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12
jQueryPad 實用的jQuery測試工具(支持IE,chrome,FF)
這個jQueryPad也是我無意中在網(wǎng)上看頁面的時候看到的,下載下來試用了下,感覺很好,這個軟件是使用WPF開發(fā)的(不過不開源,需要安裝.NET Framework 3.5),整體界面很簡潔。2010-05-05

