如何将html表的所有列明智值相加并在特定列的页脚中显示总和

时间:2017-06-07 07:06:56

标签: php jquery html

我的html表格如下所示,在我的表格的页脚中,我想添加“总计”和特定“季度”页脚中所有值的总和

"quarter1"  "quarter2" "quarter3" "quarter4"
 250000      115000         
             175000      600000     275000
 300000      150000      750000 
 650000                              450000 
 850000      290000      145000 

我的观看代码如下所示 如何克服我的问题,请建议我。任何帮助表示赞赏, 谢谢

<table class="table table-bordered" id="referListTable">
                        <thead>
                            <tr>
                            <th>SI.No</th>
                              <th>Jan-Mar</th>
                              <th>Apr-Jun</th>
                              <th>Jul-Sep</th>
                              <th>Oct-Dec</th>

                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            $i=1;
                            foreach($dashboardDetails as $llist){
                            ?>
                            <tr>
                              <td><?php echo $i; ?></td>
                              <td align="right">$llist['previous']; ?></td>
                              <td align="right">$llist['quarter1'];?></td>
                              <td align="right">$llist['quarter2'];?></td>
                              <td align="right">$llist['quarter3'];?></td>
                              <td align="right">$llist['quarter4'];?></td>


                              </tr>
                            <?php 
                                $i++;
                            }
                            ?>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>Total</th>

                                <td id="total" ></td>
                                <td id="total" ></td>
                                <td id="total" ></td>
                                <td id="total" ></td>
                                <td id="total" ></td>

                            </tr>
                         </tfoot>
                    </table>

1 个答案:

答案 0 :(得分:0)

尝试这样的事情

var sums = []
$("table tbody tr").each(function() {
  $(this).find("td").each(function(i, x) {
    if ($(x).html().length) {
      var tdValue = parseInt($(x).html());
      tdValue = (tdValue + parseInt(sums[i] == undefined ? 0 : sums[i]))
      sums[i] = tdValue
    }
  })
})
$.each(sums,function(i,x) {
  $("tfoot tr").append("<td>"+x+"</td>")
})

请注意,这是在我们在问题中使用您的html代码之前创建的,但它应该能够让您知道如何使用您自己的HTML代码

&#13;
&#13;
var sums = []
$("table tbody tr").each(function() {
  $(this).find("td").each(function(i, x) {
    if ($(x).html().length) {
      var tdValue = parseInt($(x).html());
      tdValue = (tdValue + parseInt(sums[i] == undefined ? 0 : sums[i]))
      sums[i] = tdValue
    }
  })
})
$.each(sums,function(i,x) {
  $("tfoot tr").append("<td>"+x+"</td>")
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>quarter1</td>
      <td>quarter2</td>
      <td>quarter3</td>
      <td>quarter4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>250000</td>
      <td>115000</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>175000</td>
      <td>600000</td>
      <td>275000</td>
    </tr>
    <tr>
      <td>300000</td>
      <td>150000</td>
      <td>750000</td>
      <td></td>
    </tr>
    <tr>
      <td>650000</td>
      <td></td>
      <td></td>
      <td>450000</td>
    </tr>
    <tr>
      <td>850000</td>
      <td>290000</td>
      <td>145000</td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
  <tr>
  </tr>
  </tfoot>
  
</table>
&#13;
&#13;
&#13;