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

Question

This is a table for user to record Expenses and Amount. User can add table cell to record more items with the amount. After user key in the Amount, it will show 7% tax at beside and total amount at the top. But now i am facing 2 problems.

1. If user added 2 items, and input the 2 items' amount, then if they deleted the row, the total amount will not deduct after the row is deleted.

2. the tax will only added in first row. I want to do it in each row with 7% tax with each item's amount.

So can i know how to solve this 2 problems?

 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

I have managed to make changes as per your need, also I have used jquery as you had added into your code.

I have calculated output in the remove() you can move it to a common function to avoid dirty code.

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);
  };
}

Changed GST id to class, as id should be unique.

Added this line of code to print GST into each row.

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

you had added 2 class attributes to input in JS template, also merged them.

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