网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 用Jquery选择器计算table中的某一列某一行的合计
内容
    利用Jquery选择器,计算table中的某一列,某一行的合计,非常方便。下面以计算行合计为例:
    核心算法:
    view sourceprint?1 $('#tableId tr').each(function() {
    2 $(this).find('td:eq(columnIndex)').each(function() {
    3 totalAmount += parseFloat($(this).text());
    4 })
    5 });
    下面是案例代码
    view sourceprint?01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    02 <html xmlns="http://www.w3.org/1999/xhtml">
    03 <head>
    04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    05 <title>Jquery计算table行合计</title>
    06 <script id="jquery_183" type="text/javascript" src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
    07 <script type="text/javascript">
    08 $(document).ready(function() {
    09
    10 var totalRow = 0
    11 $('#mytable tr').each(function() {
    12 $(this).find('td:eq(2)').each(function(){
    13 totalRow += parseFloat($(this).text());
    14 });
    15 });
    16
    17 $('#totalRow').append('<td>合计</td><td></td><td>'+totalRow+'</td><td></td>');
    18 });
    19 </script>
    20
    21 </head>
    22 <body>
    23 <table id="mytable" width="37%">
    24 <thead>
    25 </thead>
    26 <tr>
    27 <td width="63" >11</td>
    28 <td width="68" >12</td>
    29 <td width="62" >13</td>
    30 <td width="75" >14</td>
    31 </tr>
    32 <tr>
    33 <td width="63" >21</td>
    34 <td width="68" >22</td>
    35 <td width="62" >23</td>
    36 <td width="75" >24</td>
    37 </tr>
    38 <tr id="totalRow"></tr>
    39 </table>
    40 </body>
    41 </html>
    效果图:
    名单
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/19 2:02:26