dongxun8189
2016-07-07 11:23
浏览 52

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

The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.

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

This is the html code.

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

I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.

enter image description here I have updated my question with the image of the output, which states exactly what i need, Thank You.

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongyong2906 2016-07-07 11:31
    已采纳

    Assuming the end result looks like this:

    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

    </div>
    
    打赏 评论

相关推荐 更多相似问题