用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)文章
13個(gè)絢麗的Jquery 界面設(shè)計(jì)網(wǎng)站推薦
今天共享一些令人振奮的UI教程,這些UI大部分是基于Jquery的插件,主要包括動(dòng)態(tài)切換視圖的相冊(cè)、3D旋轉(zhuǎn)分享按鈕、Facebook admin Panel,下滑效果的導(dǎo)航Menu,滑翔購(gòu)物車(chē)功能,漂亮的Form表單元素等等。2010-09-09
Jquery中使用setInterval和setTimeout的方法
有時(shí)候需要在jquery中調(diào)用setInterval和setTimeout,直接在ready中調(diào)用其他方法,會(huì)提示缺少對(duì)象的錯(cuò)誤,解決方法如下2013-04-04
jQuery實(shí)現(xiàn)移動(dòng)端下拉展現(xiàn)新的內(nèi)容回彈動(dòng)畫(huà)
這篇文章主要介紹了jQuery實(shí)現(xiàn)移動(dòng)端下拉展現(xiàn)新的內(nèi)容回彈動(dòng)畫(huà),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06
jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法
這篇文章主要介紹了jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法,詳細(xì)介紹了前臺(tái)及后臺(tái)的處理方法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01
jquery ajax后臺(tái)返回list,前臺(tái)用jquery遍歷list的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jquery ajax后臺(tái)返回list,前臺(tái)用jquery遍歷list的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jQuery實(shí)現(xiàn)用戶注冊(cè)的表單驗(yàn)證示例
用戶注冊(cè)的表單往往是需要進(jìn)行驗(yàn)證的,否則會(huì)有一些不否合規(guī)則的數(shù)據(jù)入庫(kù),后果會(huì)不堪設(shè)想,下面為大家詳細(xì)介紹下通過(guò)jquery是如何實(shí)現(xiàn)的,下面有個(gè)示例,感興趣的朋友可以參考下2013-08-08

