用Jquery选择器计算table中的某一列某一行的合计_jquery

利用Jquery选择器,计算table中的某一列,某一行的合计,非常方便。下面以计算行合计为例:

核心算法:

$('#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计算table行合计</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>合计</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>

效果图:

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, table
, 选择器
, 合计
一列
jquery 选择器、jquery name选择器、jquery属性选择器、jquery class选择器、jquery 选择器 多个,以便于您获取更多的相关知识。

时间: 2024-11-05 04:52:15

用Jquery选择器计算table中的某一列某一行的合计_jquery的相关文章

前端开发-如何用JQuery移除table中的一列?

问题描述 如何用JQuery移除table中的一列? <html> <head> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <table id="thisTable"> <tr> <td>id</td&

基于jQuery替换table中的内容并显示进度条的代码_jquery

效果图如下:http://jialiren.sinaapp.com/jdt/ Html代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>进度条列</title> <script type=&qu

jquery获取table中的某行全部td的内容方法_jquery

复制代码 代码如下: <table><tr class="PurViewData" id="trid95">    <td>14</td>    <td id="95"><a style="color:#0000CC" href="/PurviewManage/AddPurview?id=95">TopParty优惠</a>

jQuery选择器源码解读(五):tokenize的解析过程_jquery

以下分析基于jQuery-1.10.2.js版本. 下面将以$("div:not(.class:contain('span')):eq(3)")为例,说明tokenize和preFilter各段代码是如何协调完成解析的.若想了解tokenize方法和preFilter类的每行代码的详细解释,请参看如下两篇文章: http://www.jb51.net/article/63155.htm http://www.jb51.net/article/63163.htm 下面是tokenize方

jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介_jquery

触摸事件(touch)在 jQuery Mobile 中有一些触摸事件是可定制的.然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用.当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap.taphold.swipe.swipeleft 和 swiperight. tap(轻击):一次快速完整的轻击后触发 taphold(轻击不放):轻击并不放(大约一秒)后触发 swipe(滑动):一秒内水平拖拽大于30

使用jquery选择器如何获取父级元素、同级元素、子元素_jquery

一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu

jquery选择器 按排序位置定位元素详解

生活或者工作中经常需要做一些小规模统计系统,统计事项或者收益,或者活动等等.我比较厌恶excel,以前都用php+mysql做,js展示图表, 用javascript 绘制图表,这样一个系统,怎么也化5,6个小时来编程,相当繁琐. 最近找到一个更好的办法,只用一个html文件来记录股票收益 •直接写一个html文件,数据就展示在html table里面 •样式用bootstrap很容易写好 •直接用jquery从table中把数据解析出来,然后写几行js代码来完成数据的计算 •当需要添加或者修改

Jquery选择器中使用变量实现动态选择例子_jquery

例子一: <table> <tr> <th>用户名</th> <th>状态</th> <tr> <tr> <td>张三</td> <td data-uid="10000">正常</td> <tr> <tr> <td>李四</td> <td data-uid="10001"

jQuery选择器中含有空格和特殊符号的注意事项

文章简介:使用jQuery选择器应注意的问题. 一.选择器中含有特殊符号的注意事项 1.选择器中含有"."."#"."("或"]"等特殊字符根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有"#"和"."等特殊字符,如果按照普通的方式去处理出来的话就会出错.解决此类错误的方法是使用转义符转义. <div id="id#b"&