使用循环生成 table 行时自动将行和列数据加在一起

Question

我正在创建一个表格，其中的列和行应该自动添加它们的数据，但我必须根据数据库数据生成名称并且必须使用循环来添加详细信息。添加列是完美的，但是在这里添加行是相当困难的:)

How can I add rows and column together by one input data? And also add last column total (which is not editable)

注意：我的输入行将使用循环函数生成，因此如果您想更改 class-name、id 等，请在 table 行内进行更改。

抱歉我的英语不好，在此先感谢您，您可以在下面找到该片段：

$(document).on('input', '.outstanding, .received, .paid', updateSchedule26);

function updateSchedule26() {
  var sum = 0, sum2 = 0, sum3 = 0, out, reci, paid;
  $('.outstanding, .received, .paid').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
      if ($(this).hasClass('outstanding')) {
        out = $(this).val();
        sum += parseFloat(this.value);
      } else if($(this).hasClass('received')) {
        reci = $(this).val();
        sum2 += parseFloat(this.value);
      } else if($(this).hasClass('paid')) {
        paid = $(this).val()
        sum3 += parseFloat(this.value);
      }
    }
  });
  var total = (parseInt(out) + parseInt(reci)) + parseInt(paid);
  $(".amtOutstanding").val(parseFloat(total).toFixed(2));
  $('#sch26_outstanding').val(sum.toFixed(2));
  $('#sch26_received').val(sum2.toFixed(2));
  $('#sch26_paid').val(sum3.toFixed(2));
  $('#sch26_amtOutstanding').val($(".amtOutstanding").val());
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
<table class="table table-sm">
  <thead>
    <tr>
      <th style="width:16.67%">Name</th>
      <th style="width:16.67%">Outstanding(+)</th>
      <th style="width:16.67%">Received(-)</th>
      <th style="width:16.67%">Paid(=)</th>
      <th style="width:16.67%">Sub Total</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>Name 1</td>
      <td><input type="number" name="" id="" class="form-control outstanding"></td>
      <td><input type="number" name="" id="" class="form-control received"></td>
      <td><input type="number" name="" id="" class="form-control paid"></td>
      <td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
    </tr>
    <tr>
      <td>Name 2</td>
      <td><input type="number" name="" id="" class="form-control outstanding"></td>
      <td><input type="number" name="" id="" class="form-control received"></td>
      <td><input type="number" name="" id="" class="form-control paid"></td>
      <td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
    </tr>
    
    <tr>
      <td>Add Total</td>
      <td><input type="number" name="" id="sch26_outstanding" class="form-control" readonly></td>
      <td><input type="number" name="" id="sch26_received" class="form-control" readonly></td>
      <td><input type="number" name="" id="sch26_paid" class="form-control" readonly></td>
      <td><input type="number" name="" id="sch26_amtOutstanding" class="form-control" readonly></td>
    </tr>
  </tbody>
  </table>

Answer 1

我想您可以单独更新行和列，如下所示：

$(document).on('input', '.outstanding, .received, .paid', updateTable);

function updateTable() {
  updateRow($(this).closest("tr"));
  updateCol($(this).closest("td"), $(this));
  updateTotal($(this.closest("table")));
}

function updateRow($row) {
  var sum = 0,
    sum2 = 0,
    sum3 = 0;
  $row.find('.outstanding, .received, .paid').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
      if ($(this).hasClass('outstanding')) {
        out = $(this).val();
        sum += parseFloat(this.value);
      } else if ($(this).hasClass('received')) {
        reci = $(this).val();
        sum2 += parseFloat(this.value);
      } else if ($(this).hasClass('paid')) {
        paid = $(this).val()
        sum3 += parseFloat(this.value);
      }
    }
  });
  $row.find('.amtOutstanding').val(sum + sum2 + sum3);
}

function updateCol($col, $input) {
  var index = $col.index() + 1;
  var sum = 0;
  $col.closest('table').find('td:nth-child(' + index + ')').find('input').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0 && !$(this).attr('id')) {
      sum += parseFloat(this.value);
    }
  });

  if ($input.hasClass('outstanding')) {
    $('#sch26_outstanding').val(sum.toFixed(2));
  } else if ($input.hasClass('received')) {
    $('#sch26_received').val(sum.toFixed(2));
  } else if ($input.hasClass('paid')) {
    $('#sch26_paid').val(sum.toFixed(2));
  } else if ($input.hasClass('amtOutstanding')) {
    $('#sch26_amtOutstanding').val(sum.toFixed(2));
  }

}

function updateSchedule26() {
  var sum = 0,
    sum2 = 0,
    sum3 = 0,
    out, reci, paid;
  $('.outstanding, .received, .paid').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
      if ($(this).hasClass('outstanding')) {
        out = $(this).val();
        sum += parseFloat(this.value);
      } else if ($(this).hasClass('received')) {
        reci = $(this).val();
        sum2 += parseFloat(this.value);
      } else if ($(this).hasClass('paid')) {
        paid = $(this).val()
        sum3 += parseFloat(this.value);
      }
    }
  });
  var total = (parseInt(out) + parseInt(reci)) + parseInt(paid);
  $(".amtOutstanding").val(parseFloat(total).toFixed(2));
  $('#sch26_outstanding').val(sum.toFixed(2));
  $('#sch26_received').val(sum2.toFixed(2));
  $('#sch26_paid').val(sum3.toFixed(2));
}

function updateTotal($table) {
  var sum = 0;
  $table.find('.amtOutstanding').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
        sum += parseFloat(this.value);
    }
  });
  $('#sch26_amtOutstanding').val(sum.toFixed(2))
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<table class="table table-sm">
  <thead>
    <tr>
      <th style="width:16.67%">Name</th>
      <th style="width:16.67%">Outstanding(+)</th>
      <th style="width:16.67%">Received(-)</th>
      <th style="width:16.67%">Paid(=)</th>
      <th style="width:16.67%">Sub Total</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>Name 1</td>
      <td><input type="number" name="" id="" class="form-control outstanding"></td>
      <td><input type="number" name="" id="" class="form-control received"></td>
      <td><input type="number" name="" id="" class="form-control paid"></td>
      <td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
    </tr>
    <tr>
      <td>Name 2</td>
      <td><input type="number" name="" id="" class="form-control outstanding"></td>
      <td><input type="number" name="" id="" class="form-control received"></td>
      <td><input type="number" name="" id="" class="form-control paid"></td>
      <td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
    </tr>

    <tr>
      <td>Add Total</td>
      <td><input type="number" name="" id="sch26_outstanding" class="form-control total_sum" readonly></td>
      <td><input type="number" name="" id="sch26_received" class="form-control total_sum" readonly></td>
      <td><input type="number" name="" id="sch26_paid" class="form-control total_sum" readonly></td>
      <td><input type="number" name="" id="sch26_amtOutstanding" class="form-control" readonly></td>
    </tr>
  </tbody>
</table>

使用循环生成 table 行时自动将行和列数据加在一起

Automatically add rows and column data together while using loop to generate table rows

html

javascript

jquery

add