每个表格单元格的数组输出

Question

这是一个供用户记录费用和金额的表格。用户可以添加表格单元格以记录更多带有金额的项目。用户输入金额后，它会在旁边显示 7% 的税金，在顶部显示总金额。但现在我面临两个问题。

1. 如果用户添加了2个项目，并输入了2个项目的金额，那么如果他们删除了该行，则删除该行后总金额不会扣除。

2. 税收只会添加到第一行。我想在每一行中对每件商品的金额征收 7% 的税。

那么我知道如何解决这两个问题吗？

function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode(key);
  var regex = /[0-9]|\./;
  if (!regex.test(key)) {
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

function force2decimals(event) {
  var value = $(event).val();
  var format_val = parseFloat(value).toFixed(2);
  $(event).val(format_val);
}



//<----------------------2 Decimal force END-------------------->

// +
function mFunction() {
  document.getElementById("rowrow").insertRow(-1).innerHTML =
    '<tr><td></td><td><output id="gst">0.00</output></td><td><input type="text" name="Amount[]" id="columninput" class="input" oninput="myFunction(this.value)" placeholder="Amount" style="font-size:14px;" min="0" lang="en-150" onchange="force2decimals(this)" onkeypress="validate(event)" inputmode="numeric"></td></tr>';
}

// -    
function remove() {
  var x = document.getElementById("rowrow").rows.length;
  if (x == 1) {} else {
    document.getElementById("rowrow").deleteRow(-1);
  };
}

function myFunction() {
  const ele = document.querySelectorAll('input.input');
  let sum = 0;
  ele.forEach(input => {
    sum += input.value ? parseFloat(input.value) : 0;
  });
  document.getElementById('result').textContent = sum.toFixed(2);
  document.getElementById('gst').textContent = (sum * 0.07).toFixed(2);
}

.css-serial {
  counter-reset: serial-number;
}

.css-serial td:first-child:before {
  counter-increment: serial-number;
  content: counter(serial-number);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<div id="container">
  <div id="body">
    <br>
    <div class="row">
      <div class="css-serial" style="overflow-x:auto;">
        <table id="rowrow">

          <tr>
            <td id="number"></td>
            <td><output id="gst">0.00</output></td>

            <td><input type="text" name="Amount[]" class="input" oninput="myFunction(this.value)" id="columninput" placeholder="Amount" style="font-size:14px;" min="0" lang="en-150" onchange="force2decimals(this)" onkeypress='validate(event)' inputmode='numeric'
                required></td>

            Total Amount &nbsp; <output id="result"> 0.00 </output>
            <input type="button" id="slipbutton1" onclick="mFunction();" name='add' value="+" />
            <input type="button" id="slipbutton2" onclick="remove();" name='remove' value="-" /><br><br>

        </table>
      </div>
    </div>
    <br>
  </div>
</div>

Answer 1

我已经根据您的需要进行了更改，我也使用了jquery，就像您在代码中添加的那样。

我已经在remove() 中计算了输出，您可以将其移至通用函数以避免脏代码。

function remove() {
  var x = document.getElementById("rowrow").rows.length;
  if (x == 1) {} else {
    var ele = document.querySelectorAll('input.input');
    let sum = 0;
    ele.forEach(input => {
      sum += input.value ? parseFloat(input.value) : 0;
    });

    sum = sum - ele[ele.length - 1].value;
    document.getElementById('result').textContent = sum.toFixed(2);
    document.getElementById("rowrow").deleteRow(-1);
  };
}

将 GST id 更改为 class，因为 id 应该是唯一的。

添加了这行代码以将 GST 打印到每一行。

$(input).parents("tr").find(".gst").text((input.value * 0.07).toFixed(2));

您在 JS 模板中添加了 2 个类属性输入，也将它们合并。

<tr>
  <td></td>
  <td><output class="gst">0.00</output></td>
  <td>
  <input 
    type="text" 
    name="Amount[]"
    class="columninput input" // This line
    oninput="myFunction(this.value)" 
    placeholder="Amount" 
    style="font-size:14px;" 
    min="0" lang="en-150" 
    onchange="force2decimals(this)" 
    onkeypress="validate(event)" 
    inputmode="numeric"
  >
  </td>
</tr>

function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode(key);
  var regex = /[0-9]|\./;
  if (!regex.test(key)) {
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

function force2decimals(event) {
  var value = $(event).val();
  var format_val = parseFloat(value).toFixed(2);
  $(event).val(format_val);
}



//<----------------------2 Decimal force END-------------------->

// +
function mFunction() {
  document.getElementById("rowrow").insertRow(-1).innerHTML =
    '<tr><td></td><td><output class="gst">0.00</output></td><td><input type="text" name="Amount[]" class="columninput input" oninput="myFunction(this.value)" placeholder="Amount" style="font-size:14px;" min="0" lang="en-150" onchange="force2decimals(this)" onkeypress="validate(event)" inputmode="numeric"></td></tr>';
}

// -    
function remove() {
  var x = document.getElementById("rowrow").rows.length;
  if (x == 1) {} else {
    var ele = document.querySelectorAll('input.input');
    let sum = 0;
    ele.forEach(input => {
      sum += input.value ? parseFloat(input.value) : 0;
    });

    sum = sum - ele[ele.length - 1].value;
    document.getElementById('result').textContent = sum.toFixed(2);
    document.getElementById("rowrow").deleteRow(-1);
  };
}

function myFunction() {
  debugger
  var ele = document.querySelectorAll('input.input');
  let sum = 0;
  ele.forEach(input => {
    sum += input.value ? parseFloat(input.value) : 0;
    $(input).parents("tr").find(".gst").text((input.value * 0.07).toFixed(2));
  });
  document.getElementById('result').textContent = sum.toFixed(2);
  //document.getElementById('gst').textContent = (sum * 0.07).toFixed(2);
}

.css-serial {
  counter-reset: serial-number;
}

.css-serial td:first-child:before {
  counter-increment: serial-number;
  content: counter(serial-number);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="body">
    <br>
    <div class="row">
      <div class="css-serial" style="overflow-x:auto;">
        <table id="rowrow">

          <tr>
            <td id="number"></td>
            <td><output class="gst">0.00</output></td>

            <td><input type="text" name="Amount[]" class="input" oninput="myFunction(this.value)" id="columninput" placeholder="Amount" style="font-size:14px;" min="0" lang="en-150" onchange="force2decimals(this)" onkeypress='validate(event)' inputmode='numeric'
                required></td>
            Total Amount &nbsp; <output id="result"> 0.00 </output>

            <input type="button" id="slipbutton1" onclick="mFunction();" name='add' value="+" />
            <input type="button" id="slipbutton2" onclick="remove();" name='remove' value="-" /><br><br>

        </table>
      </div>
    </div>
    <br>
  </div>
</div>