动态表中的Sum列

时间：2018-04-30 09:24:53

标签： javascript jquery html

我有一个动态表，根据输入值计算每行末尾的总列数，但我似乎无法获得该行的总数？

我用：

创建我的表 

function calc() {
    var td = document.querySelectorAll('#item_table > tr > td:last-child');
    
    var stotal = [].reduce.call(td, function(a, b) {
        return a + parseInt(b.innerText);
    }, 0);
    
    document.getElementById('sub_total').innerText = stotal;
}

$(document).on('click', '.add', function(){
      var html = '';
      html += '<tr>';
      html += '<td><input type="number" min="0" value="0" name="item_name[]" oninput="calc();calcSub()" class="form-control item_name" size="16" /></td>';
      html += '<td><input type="number" min="0" value="0" name="item_quantity[]" oninput="calc()" class="form-control item_quantity" /></td>';
      html += '<td><input type="number" min="0" value="0" name="item_unit[]" oninput="calc()" class="form-control item_unit" /></td>';
      //NEW ONES!!!!!!!!!!!!!!!
      html += '<td><select name="item_glass[]" oninput="calc()" class="form-control item_glass"><option>Select Glass Type</option><?php echo fill_unit_select_box($connect); ?></select></td>';
      html += '<td><select name="item_splash[]" oninput="calc()" class="form-control item_splash"><option value="0">Select Splash</option><?php echo fill_unit_select_box3($connect); ?></select></td>';
      html += '<td><input type="text" value="-" name="item_colour[]" oninput="calc()" class="form-control item_colour" /></td>';
    
      html += '<td><input type="number" min="0" value="0" oninput="calc()" name="item_HQuan[]" class="form-control item_HQuan" /></td>';
      html += '<td><select name="item_HDiam[]" oninput="calc()" class="form-control item_HDiam"><option value="0">Select Hole Diameter</option><?php echo fill_unit_select_box2($connect); ?></select></td>';
      html += '<td><input type="number" min="0" value="0" oninput="calc()" name="item_CQuan[]" class="form-control item_CQuan" /></td>';
    
      //Total
      html += '<td><input type="text" value="0.0" name="item_Total[]" id="item_Total[]" class="form-control item_Total" disabled/></td>';
    
    
      html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove">Delete Item<span class="glyphicon glyphicon-minus"></span></button></td></tr>';
      $('#item_table').append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-bordered" id="item_table">
      <tr id="titles">
       <th>Quantity</th>
       <th>Width</th>
       <th>Height</th>
       <th>Glass Type</th>
       <th>Sparkle or Glaze</th>
       <th>Colour Code</th>
       <th>Hole Quantity</th>
       <th>Hole Diameter</th>
       <th>Cut-out Quantity</th>
       <th>Item cost £ (excl. Vat)</th>
    
    
       <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span>Add Item</button></th>
      </tr>
     </table>

 <div class="form-group">
  <label for="job_ref">Sub Total</label>
  <input type="text" id="sub_total"  class="form-control sub_total" name="sub_total" placeholder="0" value="0" readonly/>
 </div>

尝试了另一件事，但无论输入如何，总是等于0：

function calcSub(){


     var cls = document.getElementById("item_Total[]").getElementsByTagName("td");
      var sum = 0;
      for (var i = 0; i < cls.length; i++){
          if(cls[i].className == "countable"){
              sum += isNaN(cls[i].value) ? 0 : parseInt(cls[i].value);
          }
      }
      document.getElementById('sub_total').value = sum;

   };

他们无论如何要做到这一点我无法弄明白吗？

2 个答案:

答案 0 :(得分：0)

   function calcSub(){

    var totalPrice = 0;
    $(".item_Total").each(function(){
        totalPrice += parseInt($(this).val());
        $(".sub_total").val(totalPrice);
    });

答案来自帖子：How to sum values from table column and update when remove/add new row

答案 1 :(得分：0)

尝试类似此代码的内容

＆＃13;
＆＃13; 
$(document).on('click', '.add', function(){
     var html = '';
      html += '<tr>';
      html += '<td><input type="number" min="0" value="0" name="item_name[]" class="form-control item_name" size="16" /></td>';
      html += '<td><input type="number" min="0" value="0" name="item_quantity[]" class="form-control item_quantity" /></td>';
      html += '<td><input type="number" min="0" value="0" name="item_unit[]" class="form-control item_unit" /></td>';
      //NEW ONES!!!!!!!!!!!!!!!
      html += '<td><select name="item_glass[]" class="form-control item_glass"><option>Select Glass Type</option><?php echo fill_unit_select_box($connect); ?></select></td>';
      html += '<td><select name="item_splash[]" class="form-control item_splash"><option value="0">Select Splash</option><?php echo fill_unit_select_box3($connect); ?></select></td>';
      html += '<td><input type="text" value="-" name="item_colour[]" class="form-control item_colour" /></td>';
    
      html += '<td><input type="number" min="0" value="0" name="item_HQuan[]" class="form-control item_HQuan" /></td>';
      html += '<td><select name="item_HDiam[]" class="form-control item_HDiam"><option value="0">Select Hole Diameter</option><?php echo fill_unit_select_box2($connect); ?></select></td>';
      html += '<td><input type="number" min="0" value="0" name="item_CQuan[]" class="form-control item_CQuan" /></td>';
    
      //Total
      html += '<td><input type="text" value="0.0" name="item_Total[]" id="item_Total[]" class="form-control item_Total" disabled/></td>';
    
    
      html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove">Delete Item<span class="glyphicon glyphicon-minus"></span></button></td></tr>';
      $('#item_table').append(html);
});

$(document).on('change', 'input', function() {
  $("table tr").each(function(ind, el) {
   var sum = 0; $(this).find("input:not(:last)").each(function(indx, ele) {
     sum += $(ele).val(); 
    });
    $(this).find("input").last().val(sum);
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-bordered" id="item_table">
  <tr id="titles">
    <th>Quantity</th>
    <th>Width</th>
    <th>Height</th>
    <th>Glass Type</th>
    <th>Sparkle or Glaze</th>
    <th>Colour Code</th>
    <th>Hole Quantity</th>
    <th>Hole Diameter</th>
    <th>Cut-out Quantity</th>
    <th>Item cost £ (excl. Vat)</th>

    <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span>Add Item</button></th>
  </tr>
</table>

<div class="form-group">
  <label for="job_ref">Sub Total</label>
  <input type="text" id="sub_total" class="form-control sub_total" name="sub_total" placeholder="0" value="0" readonly/>
</div>
＆＃13;
＆＃13;
＆＃13;

但请考虑以下几点：

  

1 - 为要计算的列创建一个类，并修改其jquery选择器。

     

2 - 确保输入值始终为数字，然后将其转换为Number。

     

3 - 为Sub Total插入您想要的特殊jquery代码。 （我没有添加，因为我不知道如何准确计算其价值）

相关问题
最新问题