我创建了一个表格来计算产品的总价。最初我将所有数据存储在计算机上,但这占用了太多空间。现在我想把它全部放入一个数据库中,但我无法获得行数以将其插入到数据库中。我试过了:
if(isset($_POST['submit'])){
$rowCount = count($_REQUEST['product']);
echo $rowCount;
for ($i = 0; $i < $rowCount; $i++) {
$item=$_POST['product'][$i];
}
但这只会计算一行,而不是点击添加行后的其他行。
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
b = i - 1;
$('#addr' + i).html($('#addr' + b).html()).find('td:first-child').html(i + 1);
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
$("#delete_row").click(function() {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
calc();
});
$('#tab_logic tbody').on('keyup change', function() {
calc();
});
});
function calc() {
$('#tab_logic tbody tr').each(function(i, element) {
var html = $(this).html();
if (html != '') {
var qty = $(this).find('.qty').val();
var price = $(this).find('.price').val();
$(this).find('.total').val(qty * price);
calc_total();
}
});
}
function calc_total() {
total = 0;
$('.total').each(function() {
total += parseInt($(this).val());
});
$('#sub_total').val(total.toFixed(2));
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<table cellpadding="0" cellspacing="0" id="invoice">
<form method="post" action="#">
<table id="tab_logic">
<thead>
<tr>
<th> # </th>
<th> Product </th>
<th> Qty </th>
<th> Price </th>
<th> Total </th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>1</td>
<td><input type="text" name='product[]' placeholder='Enter Product' /></td>
<td><input type="number" name='qty[]' placeholder='Enter Qty' step="0" min="0" /></td>
<td><input type="number" name='price[]' placeholder='Enter Unit Price' step="0.00" min="0" /></td>
<td><input type="number" name='total[]' placeholder='0.00' readonly /></td>
</tr>
<tr id='addr1'></tr>
</tbody>
<tbody>
<tr>
<th>Total</th>
<td><input type="number" name='sub_total' placeholder='0.00' id="sub_total" readonly /></td>
</tr>
</tbody>
</table>
</form>
<button id="add_row" >Add Row</button>
<button id='delete_row'>Delete Row</button>
</table>