[英]How to get dynamic added row data in array
我正在通过 API 添加多个项目。 我不确定如何获取动态添加的行数据。 我知道我需要使用 for 循环来指定每一行,如 row[0]、row[1]、row[2] 以区分它们并获取数组的计数。 任何人都知道如何获取动态行数据并将数组传递给 ajax。 小提琴手
<table>
<thead>
<tr>
<th>Action</th>
<th>Description</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody class="items_table">
<tr class="item-row">
<td><button id="delete" href="javascript:;" onclick="deleteRow(this)" title="Remove row">Delete</button></td>
<td><input class="form-control row-desc" id="desc" rows="1"></td>
<td><input class="form-control tx-right row-qty" type="text" id="qty" onkeyup="calc()" value="0"></td>
<td><input class="form-control tx-right row-unitprice" type="text" id="unitprice" value="0"></td>
<td><input class="form-control tx-right row-amount" type="text" id="amount" disabled></td>
</tr>
<tr class="item-row">
<td></td>
<td colspan="2"></td>
<td class="tx-right">Tax:</td>
<td>
<input class="form-control tx-right" type="text" id="amounttax"></td>
</tr>
</tbody>
<tr id="hiderow">
<td colspan="7" class="tx-center tx-15"><b><a id="addrow" href="javascript:;" title="Add a row"><i class="fe fe-plus-circle"></i>Add an Item</a></b></td>
</tr>
</table>
<script>
$(document).ready(function() {
AddItem();
$('#addrow').click(function() {
addItem();
});
$('.delete-row').click(function() {
deleteRow(btn);
});
});
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
var next = row.parentNode.rows[row.rowIndex + 0];
row.parentNode.removeChild(next);
row.parentNode.removeChild(row);
}
function addItem() {
var itemRow =
'<tr class="item-row">' +
'<td><button class="delete-row" href="javascript:; "onclick = "deleteRow(this)">Delete</button></td>' +
'<td><textarea class="form-control row-desc" id="desc" rows="1"></textarea></td>' +
'<td><input class="form-control tx-right row-qty" type="text" id="qty" onkeyup="calc()" value="0"></td>' +
'<td><input class="form-control tx-right row-unitprice" type="text" id="unitprice" value="0"></td>' +
'<td><input class="form-control tx-right row-amount" type="text" id="amount" disabled></td>' +
'</tr>' +
'<tr class="item-row">' +
'<td></td>' +
'<td colspan="2"></td>' +
'<td class="tx-right">Tax:</td>' +
'<td><input class="form-control tx-right" type="text" id="amounttax"></td>'
'</tr>';
$(".items_table").append(itemRow);
}
function AddItem() {
$("#btnAddItem").click(function(e) {
//arrayItem
var arrayItem = [];
var sArrayItem = "";
var item = {
ItemDesc: $("desc").val(),
ItemUnitPrice: $("unitprice").val(),
ItemQty: $("qty").val(),
TaxAmount: $("amounttax").val(),
ItemTotalAmount: $("amount").val()
}
arrayItem.push(item)
// at here, I only able to get the row 1 data, the following added row item didnt get it.
//byright here should give me array of item, but now I only able get the first row.
sArrayItem = JSON.stringify(arrayItem);
$.ajax({
type: "POST",
url: "AddItem",
data: JSON.stringify({
sArrayItem
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {
if (result.d.indexOf(".aspx") != -1)
window.location.href = result.d;
else
showPopup(result);
},
failure: function(response) {
alert(response.d);
}
});
});
};
<script>
如果您在单击按钮时尝试构建一个数组(使用行数据),请尝试以下 CodePen 代码。
如果您可以的话,我已经稍微修改了 HTML 结构。
我们需要遍历每一行来获取输入的数据。
let arrayItem = [];
$.each($(".items_table .item-row"),function(index,value){
let desc = $(this).find(".row-desc").val()
let qty = $(this).find(".row-qty").val()
let unitprice = $(this).find(".row-unitprice").val()
let amount = $(this).find(".row-amount").val()
let tax = $(this).find(".row-tax").val()
let item = {
ItemDesc: desc,
ItemUnitPrice:unitprice,
ItemQty: qty,
TaxAmount: tax,
ItemTotalAmount: amount,
}
arrayItem.push(item)
});
console.log(arrayItem);
在此处查看代码-> https://codepen.io/askannan/pen/jOVAmvJ
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.