He estado usando JavaScript para crear una nueva fila en la tabla para que cada dato de entrada se guarde en la base de datos. consulte el ejemplo a continuación.
Script para agregar una fila en la tabla
<script type="text/javascript"> $(document).ready(function(){ var html='<tr><td><input type="text" size="2" class="form-control" name="qt[]" id="qt" oninput="calculate();" required></td> <input type="text" size="5" class="form-control" name="uc[]" id="cf" oninput="calculate();" placeholder="₱0.00" required></td> <td><center><input type="text" size="5" class="form-control" name="ta[]" id="result" required></center></td><input type="button" class="form-control" name="remove" id="remove" value="-"></td></tr>'; var x = 1; $("#addd").click(function(){ $("#tb_field").append(html); }); $("#tb_field").on('click','#remove',function(){ $(this).closest('tr').remove(); x--; }); }); </script>Script para multiplicar dos tipos de entrada en la primera fila de la tabla
<script> function calculate() { var myBox1 = document.getElementById("qt").value; var myBox2 = document.getElementById("cf").value; var result = document.getElementById("result"); var myResult = myBox1 * myBox2; var format2 = myResult.toLocaleString("USD"); document.getElementById("result").value = format2; } </script>Hice un ejemplo de trabajo JSFiddle . El código es:
<table id="myTable"> </table> <input type="button" name="addRow" id="addRow" value="+"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js?Version=43"></script> <script> function newRowHtml(rowNumber) { return '<tr id="row'+rowNumber+'"><td><input type="text" size="2" name="qt[]" class="qt" oninput="calculate('+rowNumber+');" value="0" required></td><td><input type="text" size="5" name="uc[]" class="cf" oninput="calculate('+rowNumber+');" value="0" required></td><td><center><input type="text" size="5" name="ta[]" class="ta" required></center></td><td><input type="button" name="remove" id="removeRow" value="-"></td></tr>'; } var rowNumber = 1; $("#addRow").click(function() { $("#myTable").append(newRowHtml(rowNumber)); calculate(rowNumber); rowNumber++; }); $("#myTable").on('click', '#removeRow', function() { $(this).closest('tr').remove(); }); function calculate(rowNumber) { let row = $("#row"+rowNumber); let qt = parseInt(row.find(".qt").val()); let cf = parseInt(row.find(".cf").val()); row.find(".ta").val(qt * cf); } </script>He numerado las filas, que es más fácil que numerar celdas, y aprovecho al máximo JQuery. Espero que esto tenga algún sentido, y que puedas adaptarlo a tus necesidades.
Por supuesto, puede usar parseFloat() en lugar de parseInt() , pero tener valores como ₱0.00 en su entrada podría complicar las cosas.