如何在表中的列中设置总数

How to set a total in a column in a table?

本文关键字:设置      更新时间:2023-09-26

我有一个根据网站按钮生成的名称和价格的基本表。我需要计算一下这个表的总数。

<table id="countit">
 <tr>
   <th >name</th>
   <th >price</th>
 </tr>
 <tr>
   <td  id ="name"></td>       //this is dynamically generated through buttons
   <td id ="price" ></td>      //this is dynamically generated through buttons
 </tr>
 <tr>
   <th >total</th>
   <th id="grandtotal" ></th>   //total goes here
 </tr>
</table>

谁能告诉我如何在Javascript中做到这一点,请?

点击这里查看

    <table id="countit" border="1">
 <tr>
   <th >name</th>
   <th >price</th>
 </tr>
 <tr>
   <td  id ="name">aaa</td>       
   <td name="price">10</td>      
 </tr>
 <tr>
   <td  id ="name">bbb</td>       
   <td name="price">20</td>      
 </tr>
 <tr>
   <td  id ="name">ccc</td>       
   <td name="price">30</td>      
 </tr>
 <tr>
   <th >total</th>
   <th id="grandtotal" ></th> 
 </tr>
</table>
<script>
    var tds = document.getElementsByName("price");
    var total = 0;
    for(var i=0; i<tds.length; i++)
    total += parseInt(tds[i].innerHTML);
    document.getElementById('grandtotal').innerHTML=total;
</script>
 <tr>
  <td  id ="name"></td>       
  <td name ="price" ></td>      
 </tr>

如果从任何后端语言生成表行,则为"name"属性提供一个公共值。然后从javascript中使用

获取这些元素
var prices=getElementsByName('price'); 
for(i=0;i<prices.length;i++){
   total = total+parseInt(prices[i].innerHTML);
}

一旦你得到了总数,你可以设置这个值为任何元素。

document.getElementById('grandTotal').innerHTML = total;