查找列的总和

Question

我有以下表格行：

<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>

Answer 1

您可以尝试使用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>

Answer 2

尝试

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>