jquery實(shí)現(xiàn)select選中行、列合計(jì)示例
更新時(shí)間:2014年04月25日 15:24:04 作者:
這篇文章主要介紹了jquery如何實(shí)現(xiàn)select選中行、列合計(jì)示例 ,需要的朋友可以參考下
Jquery 方法
$(
function () {
//頁(yè)面加載時(shí)計(jì)算人員統(tǒng)計(jì)表合計(jì)值
calcSum();
});
//合計(jì)行計(jì)算
/*
以合計(jì)行為中間變量
每個(gè)單元格與該列合計(jì)行相加
得到每列合計(jì)
*/
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() {
//合計(jì)行賦初始值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");
//隱藏行不參與計(jì)算
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語(yǔ)句
<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 () {
//頁(yè)面加載時(shí)計(jì)算人員統(tǒng)計(jì)表合計(jì)值
calcSum();
});
//合計(jì)行計(jì)算
/*
以合計(jì)行為中間變量
每個(gè)單元格與該列合計(jì)行相加
得到每列合計(jì)
*/
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() {
//合計(jì)行賦初始值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");
//隱藏行不參與計(jì)算
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語(yǔ)句
復(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實(shí)現(xiàn)動(dòng)態(tài)操作select選中
- jquery獲取select選中值的方法分析
- jQuery獲取select選中的option的value值實(shí)現(xiàn)方法
- 基于jquery的二級(jí)聯(lián)動(dòng)菜單實(shí)現(xiàn)代碼
- jquery+json 通用三級(jí)聯(lián)動(dòng)下拉列表
- jQuery結(jié)合PHP+MySQL實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉列表[實(shí)例]
- jQuery select自動(dòng)選中功能實(shí)現(xiàn)方法分析
相關(guān)文章
可輸入文字查找ajax下拉框控件 ComBox的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇可輸入文字查找ajax下拉框控件 ComBox的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10addEventListener—jQuery的事件監(jiān)聽方法
在Javascript中,事件監(jiān)聽是非常重要的,通過(guò)事件監(jiān)聽,我們可以在用戶執(zhí)行某些操作時(shí)觸發(fā)相應(yīng)的處理程序。最初,Javascript監(jiān)聽事件的方式是addEvent。addEvent()比較麻煩,所以jQuery為我們提供了一個(gè)更為便捷的事件監(jiān)聽方法:addEventListener。2023-06-06JQuery的Ajax中Post方法傳遞中文出現(xiàn)亂碼的解決方法
這篇文章主要介紹了JQuery的Ajax中Post方法傳遞中文出現(xiàn)亂碼的解決方法,較為深入的分析了Ajax的post方法出現(xiàn)亂碼的原因,以及具體的解決方法,需要的朋友可以參考下2014-10-10jQuery焦點(diǎn)圖切換簡(jiǎn)易插件制作過(guò)程全紀(jì)錄
本文主要講訴了本人制作一個(gè)jquery焦點(diǎn)圖切換的簡(jiǎn)易插件的過(guò)程,十分的詳細(xì),希望對(duì)大家能有所幫助2014-08-08JQuery擴(kuò)展插件Validate 3通過(guò)參數(shù)設(shè)置錯(cuò)誤信息
最終顯示在頁(yè)面上的錯(cuò)誤分為兩種:第一種是默認(rèn)錯(cuò)誤信息,該信息已經(jīng)被定義在插件中了,可以手動(dòng)修改。2011-09-09jquery dataview數(shù)據(jù)視圖插件使用方法
這篇文章主要介紹了jquery dataview數(shù)據(jù)視圖插件使用方法,數(shù)據(jù)填充與視圖更新利器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12jQueryPad 實(shí)用的jQuery測(cè)試工具(支持IE,chrome,FF)
這個(gè)jQueryPad也是我無(wú)意中在網(wǎng)上看頁(yè)面的時(shí)候看到的,下載下來(lái)試用了下,感覺(jué)很好,這個(gè)軟件是使用WPF開發(fā)的(不過(guò)不開源,需要安裝.NET Framework 3.5),整體界面很簡(jiǎn)潔。2010-05-05