我有类似创建订单的内容，其中包含：订单明细和订单产品
当我单击Create Row时，指定的数据: name, lprice, count, price将添加到表行中，包括行号
我的目标是在0 startnig上定义行号，如下所示：
<input name="product[0][product_id]" id="product_id" style="display:none" value="25">
<input name="product[0][lprice]" id="lprice" style="display:none" value="25">
最终目标是使用php获取这些值，然后将其保存在sql中
您提出的编辑问题的建议将不胜感激
var sp = document.getElementById('product_id');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var wrapper=document.getElementById('wrapper');
wrapper.onchange = function(){
var selected = sp.options[sp.selectedIndex];
var selected_type = pt.options[pt.selectedIndex].value;
if (selected_type === "1"){
lp.value = selected.getAttribute('data-fprice');
}
if (selected_type === "2"){
lp.value = selected.getAttribute('data-fpricec');
}
if (selected_type === "3"){
lp.value = selected.getAttribute('data-price');
}
if (selected_type === "4"){
lp.value = selected.getAttribute('data-pricec');
}
fp.value = "";
fp.value = lp.value * count.value;
};
wrapper.onchange();
$(function() {
function numberRows($t) {
var c = 0;
$t.find("tr").each(function(ind, el) {
var number = ++c;
$(el).find("td:eq(0)").html(number + ".");
});
}
$("#add-service-button").click(function(e) {
var product = document.getElementById('product_id');
var selected = product.options[sp.selectedIndex];
product = selected.getAttribute('data-name');
var product_id = $("#product_id").val();
var lprice = $("#lprice").val();
var count = $("#count").val();
var price = $("#price").val();
$product_id = $("<input>").attr({name: 'product['+ 'number' + '][product_id]', id: 'product_id', style:'display:none', value: product_id});
$lprice = $("<input>").attr({name: 'product['+ 'number' + '][lprice]', id: 'lprice', style:'display:none', value: lprice});
$count = $("<input>").attr({name: 'product['+ 'number' + '][count]', id: 'count', style:'display:none', value: count});
$price = $("<input>").attr({name: 'product['+ 'number' + '][price]', id: 'price', style:'display:none', value: price});
e.preventDefault();
var $row = $("<tr>");
$row.append($("<td>"));
$row.append($("<td>").html(product).append($product_id));
$row.append($("<td>").html(lprice).append($lprice));
$row.append($("<td>").html(count).append($count));
$row.append($("<td>").html(price).append($price));
$row.append($("<td>").html("<a class='del-service text-danger' href='#' title='Click to remove this entry'>X</a>"));
$row.appendTo($("#service-table tbody"));
numberRows($("#service-table"));
});
$("#form-entry form").submit(function(e) {
e.preventDefault();
$("#add-service-button").trigger("click");
});
$("#service-table").on("click", ".del-service", function(e) {
e.preventDefault();
var $row = $(this).parent().parent();
var retResult = confirm("Are you sure?");
if (retResult) {
$row.remove();
numberRows($("#service-table"));
}
});
});.form-entry input, .form-entry select {
border: 1px solid #ccc;
padding: 10px;
padding-left: 1em;
}
.form-entry button {
border: 0;
background-color: #5AD0A1;
color: #fff;
cursor: pointer;
padding: .6em 1.25em;
}
.table-wrapper {
font-family: Arial, sans-serif;
}
.table-wrapper table td {
border-bottom: 1px dashed #ccc;
padding: 1em .2em;
}
.table-wrapper table tr:last-child td {
border-bottom: 0;
}
.table-wrapper table td:first-child {
color: #ccc;
width: 2em;
}
.table-wrapper table td:last-child a {
color: #F00;
text-decoration: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<form>
<div class="form-entry">
<select name="paytype" id="paytype">
<option style="display:none">Pay Type:</option>
<option value="1" data-price="">First sell, Cash</option>
<option value="2" data-price="">First sell, Check</option>
<option value="3" data-price="">Cash</option>
<option value="4" data-price="">Check</option>
</select>
<select name="product_id" id="product_id">
<option style="display:none">Select Product</option>
<option value="1" data-fprice="10" data-fpricec="12" data-price="15" data-pricec="17" data-name="Bag">Bag</option>
<option value="2" data-fprice="20" data-fpricec="22" data-price="25" data-pricec="27" data-name="Hat">Hat</option>
<option value="3" data-fprice="30" data-fpricec="33" data-price="35" data-pricec="37" data-name="Watch">Watch</option>
</select>
<input name="lprice" id="lprice" tabindex="1" value="" placeholder="Price" readonly="" type="currency">
<input name="count" id="count" tabindex="1" value="" placeholder="Count" type="number">
<input name="price" id="price" tabindex="1" value="" readonly="" placeholder="Full Price" type="currency">
<button type="submit" id="add-service-button">Create Row</button>
</div>
<div class="table-wrapper">
<table id="service-table" width="100%">
<tbody>
</tbody>
</table>
</div>
</form>
</div>
答案 0 :(得分：1)
您可以发布多个与数组同名的输入，我建议使用
<select name="product_id[]" id="product_id_1">
<input name="lprice[]" id="lprice_1" tabindex="1" value="" placeholder="Price" readonly="" type="currency">
<input name="count[]" id="count_1" tabindex="1" value="" placeholder="Count" type="number">
<input name="price[]" id="price_1" tabindex="1" value="" readonly="" placeholder="Full Price" type="currency">
每当添加新行时，只需增加id，但不要更改名称。
在PHP中，您将能够遍历发布的数组并将每一行插入数据库。这是一个例子
for($i=0; $i < count($_POST['product_id']); $i++) {
$productid = $_POST['product_id'][i];
$lprice = $_POST['lprice'][i];
$count = $_POST['count'][i];
$lprice = $_POST['price'][i];
//Insert a row with $productid, $lprice, $count, $lprice
}