用Jquery選擇器計(jì)算table中的某一列某一行的合計(jì)
更新時(shí)間：2014年08月13日 17:17:49 投稿：whsnow
本節(jié)主要介紹了用Jquery選擇器計(jì)算table中的某一列某一行的合計(jì),需要的朋友可以參考下
利用Jquery選擇器，計(jì)算table中的某一列，某一行的合計(jì)，非常方便。下面以計(jì)算行合計(jì)為例：
核心算法：
$('#tableId tr').each(function() {
$(this).find('td:eq(columnIndex)').each(function() {
totalAmount += parseFloat($(this).text());
})
});
下面是案例代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery計(jì)算table行合計(jì)</title>
<script id="jquery_183" type="text/javascript" class="library" src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var totalRow = 0
$('#mytable tr').each(function() {
$(this).find('td:eq(2)').each(function(){
totalRow += parseFloat($(this).text());
});
});
$('#totalRow').append('<td>合計(jì)</td><td></td><td>'+totalRow+'</td><td></td>');
});
</script>
</head>
<body style="width:100%; height:100%;">
<table id="mytable" border="1" width="37%">
<thead>
</thead>
<tr>
<td width="63" >11</td>
<td width="68" >12</td>
<td width="62" >13</td>
<td width="75" >14</td>
</tr>
<tr>
<td width="63" >21</td>
<td width="68" >22</td>
<td width="62" >23</td>
<td width="75" >24</td>
</tr>
<tr id="totalRow"></tr>
</table>
</body>
</html>
效果圖：
您可能感興趣的文章:
- JS與jQuery遍歷Table所有單元格內(nèi)容的方法
- 基于jquery的合并table相同單元格的插件(精簡(jiǎn)版)
- 合并table相同單元格的jquery插件分享(很精簡(jiǎn))
- jQuery實(shí)現(xiàn)鼠標(biāo)雙擊Table單元格變成文本框及輸入內(nèi)容后更新到數(shù)據(jù)庫(kù)的方法
- 使用jQuery 操作table 完成單元格合并的實(shí)例
- jQuery獲取table行數(shù)并輸出單元格內(nèi)容的實(shí)現(xiàn)方法
- jQuery 選擇表格(table)里的行和列及改變簡(jiǎn)單樣式
- jQuery操作checkbox選擇(list/table)
- jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
- JS拖動(dòng)選擇table里的單元格完整實(shí)例【基于jQuery】
相關(guān)文章
jquery滾動(dòng)條插件slimScroll使用方法
這篇文章主要為大家詳細(xì)介紹了jquery滾動(dòng)條插件slimScroll的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用
這篇文章主要介紹了jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用,涉及jQuery窗體調(diào)用的相關(guān)技巧,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery元素選擇器實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
通過(guò)jquery.cookie.js實(shí)現(xiàn)記住用戶名、密碼登錄功能
這篇文章主要介紹了通過(guò)jquery.cookie.js實(shí)現(xiàn)記住用戶名、密碼登錄功能,通過(guò)Cookies讓網(wǎng)站服務(wù)器把少量數(shù)據(jù)儲(chǔ)存到客戶端的硬盤或內(nèi)存，從客戶端的硬盤讀取數(shù)據(jù)的一種技術(shù)；具體實(shí)現(xiàn)過(guò)程大家通過(guò)本文一起看看吧2018-06-06
這篇文章主要介紹了jQuery對(duì)象$.html的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
這篇文章主要演示了5個(gè)jQuery Mobile 觸摸事件實(shí)例,需要的朋友可以參考下。2016-06-06
基于jQuery實(shí)現(xiàn)點(diǎn)擊同時(shí)更改兩個(gè)iframe的網(wǎng)址
最近寫了兩個(gè)管理后臺(tái)的前端頁(yè)面,其中有一個(gè)管理后臺(tái),左側(cè)菜單導(dǎo)航和右側(cè)內(nèi)容頁(yè)是兩個(gè)iframe,需求是,點(diǎn)擊上面的主導(dǎo)航時(shí),左側(cè)iframe和右側(cè)iframe調(diào)用不同的鏈接.2010-07-07
.delay()是用來(lái)在jQuery動(dòng)畫效果和類似隊(duì)列中是最好的。但是，由于其本身的限制，比如無(wú)法取消延時(shí)——.delay()，它不是JavaScript的原生 setTimeout函數(shù)的替代品，這可能是更適合某些使用情況。2014-09-09
jquery打開直接跳到網(wǎng)頁(yè)最下面、最低端實(shí)現(xiàn)代碼
接下來(lái)為大家詳細(xì)介紹下jquery如何實(shí)現(xiàn)打開直接跳到網(wǎng)頁(yè)最下面,最低端，感興趣的朋友可以參考下哈2013-04-04
Jqgrid表格隨窗口大小改變而改變的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)Jqgrid表格隨窗口大小改變而改變的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12