[英]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)
我們在這里使用標准: querySelectorAll 、 reduce 、 箭頭函數、 擴展語法(將 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.