簡體   English   中英

查找列的總和

[英]Find sum of the column

我有這張桌子 我有以下表格行:

<tr class="table-row">
  <td class="column-1">
    <div class="cart-img-product b-rad-4 o-f-hidden">
      <img src="../admin/uploads/<?php echo $info['product_photo']; ?>" alt="IMG-PRODUCT">
    </div>
  </td>
  <td class="column-2">
    <?php echo $info['product_name']; ?>
  </td>
  <td class="column-3"><input type="text" value="<?php echo $info['product_price']; ?>" readonly></td>
  <td class="column-4"><input type="text" value="<?php echo $info['product_amount']; ?> Piece" readonly></td>
  <td class="column-5"><input style="color:red;" type="text" value="Rs <?php echo $info['product_price']*$info['product_amount']; ?>" readonly></td>
</tr>

我想得到最后一個td的總和,這將是總定價。 我想過使用 js,但由於行可能會動態添加,因此很難。 我怎樣才能得到總價。

我想在這里顯示總數。

<span class="m-text21 w-size20 w-full-sm">
   <strong><input type="text" id="total" value=""></strong>
</span>

您可以嘗試使用querySelectorAll()forEach() ,如下所示:

 var lastTDs = document.querySelectorAll('tbody tr td:last-child input'); var sum = 0; [...lastTDs].forEach(function(td) { sum += Number(td.value.split(' ')[1]); }); console.log(sum);
 <table> <tbody> <tr class="table-row"> <td class="column-1"> <div class="cart-img-product b-rad-4 of-hidden"> <img src="../admin/uploads/<?php echo $info['product_photo']; ?>" alt="IMG-PRODUCT"> </div> </td> <td class="column-2"><?php echo $info['product_name']; ?></td> <td class="column-3"><input type="text" value="<?php echo $info['product_price']; ?>" readonly></td> <td class="column-4"><input type="text" value="<?php echo $info['product_amount']; ?> Piece" readonly></td> <td class="column-5"><input style="color:red;" type="text" value="Rs 50" readonly></td> </tr> <tr class="table-row"> <td class="column-1"> <div class="cart-img-product b-rad-4 of-hidden"> <img src="../admin/uploads/<?php echo $info['product_photo']; ?>" alt="IMG-PRODUCT"> </div> </td> <td class="column-2"><?php echo $info['product_name']; ?></td> <td class="column-3"><input type="text" value="<?php echo $info['product_price']; ?>" readonly></td> <td class="column-4"><input type="text" value="<?php echo $info['product_amount']; ?> Piece" readonly></td> <td class="column-5"><input style="color:red;" type="text" value="Rs 100" readonly></td> </tr> </tbody> </table>

嘗試

let v = [...document.querySelectorAll('.column-5 input')];
total.value = v.reduce((a,c)=> +c.value.replace(/Rs /,'')+a, 0)

我們在這里使用標准: querySelectorAllreduce箭頭函數擴展語法(將 NodeList 轉換為數組 - 可以訪問 reduce), 替換為簡單的正則表達式(刪除Rs前綴)。 v包含來自所有行的最后一列的<input>元素的數組。 通過+ in +c.val.. JS 將字符串隱式轉換為數字。

 let v = [...document.querySelectorAll('.column-5 input')]; total.value = v.reduce((a,c)=> +c.value.replace(/Rs /,'')+a, 0)
 <table><tbody> <tr class="table-row"> <td class="column-1"> <div class="cart-img-product b-rad-4 of-hidden"> <img src="../admin/uploads/xxx" alt="IMG-PRODUCT"> </div> </td> <td class="column-2"> <?php echo $info['product_name']; ?> </td> <td class="column-3"><input type="text" value="10000" readonly></td> <td class="column-4"><input type="text" value="2 Piece" readonly></td> <td class="column-5"><input style="color:red;" type="text" value="Rs 20000" readonly></td> </tr> <tr class="table-row"> <td class="column-1"> <div class="cart-img-product b-rad-4 of-hidden"> <img src="../admin/uploads/xxx" alt="IMG-PRODUCT"> </div> </td> <td class="column-2"> <?php echo $info['product_name']; ?> </td> <td class="column-3"><input type="text" value="14000" readonly></td> <td class="column-4"><input type="text" value="1 Piece" readonly></td> <td class="column-5"><input style="color:red;" type="text" value="Rs 14000" readonly></td> </tr> <tbody><table> <span class="m-text21 w-size20 w-full-sm"> <strong><input type="text" id="total" value=""></strong> </span>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM