如何获取此动态表中最后2列的列总和值

时间：2016-07-07 11:23:58

标签： javascript php jquery html5

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

<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 和<分别是强>总字段。请提前帮助，谢谢。

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

1 个答案:

答案 0 :(得分：0)

假设最终结果如下：

＆＃13;
＆＃13; 
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);
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

JSFIDDLE

相关问题
最新问题