javascript - 如何获取此动态表中最后两列的列总和

标签 javascript php jquery html

下面的代码用于向表中添加新行，同时将两个字段相乘并在最终字段中显示结果，在此动态生成的行和代码的最后部分中，如果不需要，则删除添加的行.

<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
  var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
    '<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
    '<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
    '<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
    '<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
    '<th><a href="#" class="remove-box">Remover</a></th></tr>');

  $('#tabela-lotes tbody').append(box_html);
  return false;
});

$('#tabela-lotes').on("keyup", ".multLote input", function() {
  var mult = 0;
  // for each row:
  console.log($(this).closest('table').find("tr.multLote").length);
  $(this).closest('tr.multLote').each(function() {
    // get the values from this row:
    var $val20 = $('.val20', this).val();
    var $val10 = $('.val10', this).val();
    console.log($val100);
    var $total = ($val20 * $val10);
    console.log($total);
    // set total for the row
    $('.lote_result', this).val($total);
    mult += $total;
  });
});

$('#tabela-lotes').on('click', '.remove-box', function(e) {
  e.preventDefault();
  $(this).closest('tr.multLote').remove();
});

});


</script>

这是 html 代码。

 <form action="tabledb.php" method="POST">
<body>
  <input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
  <tbody><tr class="multLote">
    <td align="center">
      <input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
    </td>
    <td>
      <textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
    </td>

    <td>
      <input type="text" name="lote20[]" class="val20" value="0">
    </td>
    <td>
      <input type="text" name="lote10[]" class="val10" value="0">
    </td>
    <td>
      <input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
    </td>
  </tr>
</tbody></table>

<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>

我想要获取 lote10[ ] 和 lote_result[ ] 字段的总列总和，以显示在 total_cbs 和 <分别是strong>total字段。请帮忙，先谢谢您。

enter image description here 我已经用输出图像更新了我的问题，它准确地说明了我所需要的，谢谢。

最佳答案

假设最终结果如下:

var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
  var inputs = elements[i].getElementsByTagName('input');
  result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>

  <tbody>
    <tr class="multLote">
      <td align="center">
        <input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
      </td>
      <td>
        <textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
      </td>
      <td>
        <input type="text" name="lote20[]" value="0" class="val20">
      </td>
      <td>
        <input type="text" name="lote10[]" value="0" class="val10">
      </td>
      <td>
        <input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
      </td>
      <th><a href="#" class="remove-box">Remover</a>
      </th>
    </tr>
    <tr class="multLote">
      <td align="center">
        <input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
      </td>
      <td>
        <textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
      </td>
      <td>
        <input type="text" name="lote20[]" value="0" class="val20">
      </td>
      <td>
        <input type="text" name="lote10[]" value="0" class="val10">
      </td>
      <td>
        <input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
      </td>
      <th><a href="#" class="remove-box">Remover</a>
      </th>
    </tr>
    <tr class="multLote">
      <td align="center">
        <input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
      </td>
      <td>
        <textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
      </td>
      <td>
        <input type="text" name="lote20[]" value="0" class="val20">
      </td>
      <td>
        <input type="text" name="lote10[]" value="0" class="val10">
      </td>
      <td>
        <input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
      </td>
      <th><a href="#" class="remove-box">Remover</a>
      </th>
    </tr>
    <tr class="multLote">
      <td align="center">
        <input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
      </td>
      <td>
        <textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
      </td>
      <td>
        <input type="text" name="lote20[]" value="0" class="val20">
      </td>
      <td>
        <input type="text" name="lote10[]" value="0" class="val10">
      </td>
      <td>
        <input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
      </td>
      <th><a href="#" class="remove-box">Remover</a>
      </th>
    </tr>
    <tr class="multLote">
      <td align="center">
        <input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
      </td>
      <td>
        <textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
      </td>
      <td>
        <input type="text" name="lote20[]" value="0" class="val20">
      </td>
      <td>
        <input type="text" name="lote10[]" value="0" class="val10">
      </td>
      <td>
        <input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
      </td>
      <th><a href="#" class="remove-box">Remover</a>
      </th>
    </tr>

  </tbody>
</table>

JSFIDDLE

关于javascript - 如何获取此动态表中最后两列的列总和，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38244223/

上一篇：javascript - 如何修复 "Uncaught Error: [$injector:modulerr]"错误？

下一篇：Windows 10/IE 11 上的 Javascript HTA ADODB 连接

相关文章：

javascript - return语句是从内到外工作的吗？

javascript - 如何对具有不同键的对象数组进行排序

javascript - 输出 gulp-qunit 控制台输出到文件

php - 非www.网站版本不显示

javascript - 如何将相应的表头 (th) 复制到其表格单元格 (td)？

javascript - 基于时间的特定背景

javascript - js脚本仅显示来自mysql数据库的真实 bool 值

php - 通过变量访问类静态函数

javascript - 更新自动滑动引导轮播的事件元素

javascript - 无法让这个 CSS/jQuery 下划线动画工作，我做错了什么？

©2024 IT工具网  联系我们