嗨，我有 HTML 表格文本欄位，我想在單擊添加按鈕時移動下一行，請指導我如何操作，請參見下圖
問題 目前，新行是一個克隆，因此新行的元素將具有與原始行相同的名稱。導致 selSupplierName 欄位重復。
癥狀 當 JQuery 然后根據名稱 selSupplierName 查找欄位時，它將選擇第一個實體，而不是 selSupplierName 的新行的錯誤。
這是我的代碼
<head>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<link href="/Content/style.css" rel="stylesheet" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-
lightness/jquery-ui.css" rel="stylesheet">
<script src="~/scripts/bootstrap.min.js"></script>
<style>
.highlight_row {
background-color: red;
}
.hidden {
display: none;
}
</style>
</head>
<div class="row">
<div class="col-md-10" style="margin:auto">
<table class="styled-table" id="item-list">
<colgroup>
<col style="width:25%">
<col style="width:25%">
<col style="width:10%">
<col style="width:10%">
<col style="width:10%">
<col style="width:10%">
<col style="width:10%">
</colgroup>
<thead style="height:40px;font-size:12px;font-
weight:bold">
<tr>
<th class="px-1 py-1 text-center">Store Name</th>
<th class="px-1 py-1 text-center">Product
Name</th>
<th class="px-1 py-1 text-center">Unit</th>
<th class="px-1 py-1 text-center">Qty</th>
<th class="px-1 py-1 text-center">Price</th>
<th class="px-1 py-1 text-center">Total</th>
<th class="px-1 py-1 text-center">Action</th>
</tr>
</thead>
<tbody>
<tr class="po-item" data-id="">
<td class="align-middle p-1">
<select name="selSupplierName"
id="selSupplierName" onkeypress="return
pressEnter('ProductName')" tabindex="3" class="form-control
js-example-basic-single">
<option value="">Select Supplier</option>
@{
foreach (string name in
ViewBag.SupplierList)
{
<option value="@name">@name</option>
}
}
</select>
</td>
<td class="align-middle p-1">
<input type="hidden" name="item_id[]">
<input type="text" id="ProductName" onkeypress="return pressEnter('qty')" class="form-control text-box single-line" required />
</td>
<td class="align-middle p-1">
<input type="text" class="form-control text-box single-line" name="unit[]" />
</td>
<td class="align-middle p-0 text-center">
<input type="number" class="form-control text-box single-line" onkeypress="return pressEnter('unit_price')" step="any" id="qty" name="qty[]" />
</td>
<td class="align-middle p-1">
<input type="number" step="any" class="form-control text-box single-line" onkeypress="return pressEnter('add_row')" id="unit_price" name="unit_price[]" />
</td>
<td class="align-middle p-1">
<input type="number" step="any" class="form-control text-box single-line" name="total-price[]" />
</td>
<td class="align-middle p-1 text-center">
<button class="btn btn btn-sm btn-flat btn-primary py-0 mx-1" type="button" id="add_row"><i class="fa fa-plus"></i></button>
<button class="btn btn-sm btn-danger py-0" type="button" onclick="rem_item($(this))"><i class="fa fa-times"></i></button>
</td>
</tr>
</tbody>
<tfoot>
<tr class="bg-lightblue">
<tr>
<th class="p-1 text-right" colspan="5">Total</th>
<th class="p-1 text-right" id="sub_total">0</th>
</tr>
<tr>
<th class="p-1 text-right" colspan="6">
Discount (%)
<input type="number" step="any" name="discount_percentage" class="border-light text-right">
</th>
<th class="p-1"><input type="text" class="w-100 border-0 text-right" readonly /></th>
</tr>
<tr>
<th class="p-1 text-right" colspan="6">
Tax Inclusive (%)
<input type="number" step="any" name="tax_percentage" class="border-light text-right">
</th>
<th class="p-1"><input type="text" class="w-100 border-0 text-right" readonly /> </th>
</tr>
<tr>
<th class="p-1 text-right" colspan="5">Total</th>
<th class="p-1 text-right" id="total">0</th>
</tr>
</tfoot>
</table>
</div>
</div>
<table class="styled-table" id="item-clone"
style="margin:auto;display:none;width:auto" >
<tr class="po-item" data-id="">
<td class="align-middle p-1">
<select name="selSupplierName" id="selSupplierName"
onkeypress="return pressEnter('BiltyNo')" tabindex="3"
class="form-control js-example-basic-single">
<option value="">Select Supplier</option>
@{
foreach (string name in ViewBag.SupplierList)
{
<option value="@name">@name</option>
}
}
</select>
</td>
<td class="align-middle p-1">
<input type="hidden" name="item_id[]">
<input type="text" class="form-control text-box single-line" id="ProductName" onkeypress="return pressEnter()" required />
</td>
<td class="align-middle p-1">
<input type="text" class="form-control text-box single-line" name="unit[]" />
</td>
<td class="align-middle p-0 text-center">
<input type="number" class="form-control text-box single-line" step="any" name="qty[]" />
</td>
<td class="align-middle p-1">
<input type="number" class="form-control text-box single-line" name="unit_price[]" value="0" />
</td>
<td class="align-middle p-1">
<input type="number" step="any" class="form-control text-box single-line" name="total-price[]" />
</td>
<td class="align-middle p-1 text-center">
<button class="btn btn btn-sm btn-flat btn-primary py-0 mx-1" onclick="add_row()" type="button" id="add_row"><i class="fa fa-plus"></i></button>
<button class="btn btn-sm btn-danger py-0" type="button" onclick="rem_item($(this))"><i class="fa fa-times"></i></button>
</td>
<td class="align-middle p-1 text-center">
</td>
<script>
function pressEnter(nextInput) {
// Key Code for ENTER = 13
//if ((event.keyCode == 13)) {
// document.getElementById(nextInput).focus({ preventScroll: false });
//}
}
function rem_item(_this) {
_this.closest('tr').remove()
}
function calculate() {
var _total = 0
$('.po-item').each(function () {
var row_total = 0;
var qty = $(this).find("[name='qty[]']").val()
var unit_price = $(this).find("[name='unit_price[]']").val()
if (qty > 0 && unit_price > 0) {
row_total = parseFloat(qty) * parseFloat(unit_price)
}
$(this).find("[name='total-price[]']").val((row_total))
})
}
//$('#add_row').click(function () {
// var tr = $('#item-clone tr').clone()
// $('#item-list tbody').append(tr)
// //_autocomplete(tr)
// tr.find('[name="qty[]"],[name="unit_price[]"]').on('input keypress', function (e) {
// calculate()
// })
// $("#selSupplierName").focus();
//})
$('#add_row').click(function () {
// Get the count of rows.
var counter = $('.my-row-class').length;
// Your clone functionality.
var tr = $('#item-clone tr').clone();
// Add a class to it.
tr.addClass("my-row-class");
// Define the new ID (Not using iterpolation on purpose).
var newId = "row" counter;
tr.attr('id', newId);
// Add it to the table body.
$('#item-list tbody').append(tr);
// Your calc function.
tr.find('[name="qty[]"],[name="unit_price[]"]').on('input keypress', function (e) {
calculate();
});
alert(newId);
// Select based on the composite id.
// $("#selSupplierName").find('input:last').focus();
$(newId " #selSupplierName").focus();
})
function add_row()
{
$('#add_row').trigger('click')
}
$(document).ready(function () {
if ($('#item-list .po-item').length > 0) {
$('#item-list .po-item').each(function () {
var tr = $(this)
// _autocomplete(tr)
tr.find('[name="qty[]"],[name="unit_price[]"]').on('input keypress', function (e) {
calculate()
})
//$('#item-list tfoot').find('[name="discount_percentage"],[name="tax_percentage"]').on('input keypress', function (e) {
// calculate()
//})
tr.find('[name="qty[]"],[name="unit_price[]"]').trigger('keypress')
})
} else {
$('#add_row').trigger('click')
}
$('.select2').select2({ placeholder: "Please Select here", width: "relative" })
})
uj5u.com熱心網友回復：
問題
目前，新行是一個克隆，因此新行的元素將具有與原始行相同的名稱。導致selSupplierName欄位重復。
癥狀
當 JQuery 然后根據 name 找到欄位時selSupplierName，它會選擇第一個實體，而不是selSupplierName.
建議
正確的解決方案是向克隆的行 ( tr)添加一個 ID ，因為這將使查找新創建的行的子行也命名selSupplierName變得容易。
快速解決方法是選擇 的最后一個實體selSupplierName，因為這在技術上應該是新行所在的位置。
建議修復的快速示例
$('#add_row').click(function () {
// Get the count of rows.
var counter = $('.my-row-class').size();
// Your clone functionality.
var tr = $('#item-clone tr').clone();
// Add a class to it.
tr.addClass( "my-row-class" );
// Define the new ID (Not using iterpolation on purpose).
var newId = "row" counter;
tr.attr('id') = `row`;
// Add it to the table body.
$('#item-list tbody').append(tr);
// Your calc function.
tr.find('[name="qty[]"],[name="unit_price[]"]').on('input keypress', function (e) {
calculate();
});
// Select based on the composite id.
$(newId " #selSupplierName").focus();
})我相信這樣的事情應該適用于您的解決方案，但是因為我沒有所有相關的代碼測驗這會很痛苦。
潛在快速修復的快速示例
// Select the last instance of the element.
$("#selSupplierName").last().focus();轉載請註明出處，本文鏈接：https://www.uj5u.com/net/391534.html
標籤：javascript html 阿贾克斯