hi i have HTML table text fields i want to move next row when I click on add button please guide me how to do this see image below
Problem Currently the new row is a clone, so the elements would have the same name for the new row, as it would for the original row. Resulting in duplicates of the selSupplierName field.
Symptom When JQuery then finds the field based on the name selSupplierName, it would select the first instance, and not the new rows' bersion of the selSupplierName.
and here is my code
<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 >
<div style="margin:auto">
<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 >Store Name</th>
<th >Product
Name</th>
<th >Unit</th>
<th >Qty</th>
<th >Price</th>
<th >Total</th>
<th >Action</th>
</tr>
</thead>
<tbody>
<tr data-id="">
<td >
<select name="selSupplierName"
id="selSupplierName" onkeypress="return
pressEnter('ProductName')" tabindex="3" >
<option value="">Select Supplier</option>
@{
foreach (string name in
ViewBag.SupplierList)
{
<option value="@name">@name</option>
}
}
</select>
</td>
<td >
<input type="hidden" name="item_id[]">
<input type="text" id="ProductName" onkeypress="return pressEnter('qty')" required />
</td>
<td >
<input type="text" name="unit[]" />
</td>
<td >
<input type="number" onkeypress="return pressEnter('unit_price')" step="any" id="qty" name="qty[]" />
</td>
<td >
<input type="number" step="any" onkeypress="return pressEnter('add_row')" id="unit_price" name="unit_price[]" />
</td>
<td >
<input type="number" step="any" name="total-price[]" />
</td>
<td >
<button type="button" id="add_row"><i ></i></button>
<button type="button" onclick="rem_item($(this))"><i ></i></button>
</td>
</tr>
</tbody>
<tfoot>
<tr >
<tr>
<th colspan="5">Total</th>
<th id="sub_total">0</th>
</tr>
<tr>
<th colspan="6">
Discount (%)
<input type="number" step="any" name="discount_percentage" >
</th>
<th ><input type="text" readonly /></th>
</tr>
<tr>
<th colspan="6">
Tax Inclusive (%)
<input type="number" step="any" name="tax_percentage" >
</th>
<th ><input type="text" readonly /> </th>
</tr>
<tr>
<th colspan="5">Total</th>
<th id="total">0</th>
</tr>
</tfoot>
</table>
</div>
</div>
<table id="item-clone"
style="margin:auto;display:none;width:auto" >
<tr data-id="">
<td >
<select name="selSupplierName" id="selSupplierName"
onkeypress="return pressEnter('BiltyNo')" tabindex="3"
>
<option value="">Select Supplier</option>
@{
foreach (string name in ViewBag.SupplierList)
{
<option value="@name">@name</option>
}
}
</select>
</td>
<td >
<input type="hidden" name="item_id[]">
<input type="text" id="ProductName" onkeypress="return pressEnter()" required />
</td>
<td >
<input type="text" name="unit[]" />
</td>
<td >
<input type="number" step="any" name="qty[]" />
</td>
<td >
<input type="number" name="unit_price[]" value="0" />
</td>
<td >
<input type="number" step="any" name="total-price[]" />
</td>
<td >
<button onclick="add_row()" type="button" id="add_row"><i ></i></button>
<button type="button" onclick="rem_item($(this))"><i ></i></button>
</td>
<td >
</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" })
})
CodePudding user response：
Problem
Currently the new row is a clone, so the elements would have the same name for the new row, as it would for the original row. Resulting in duplicates of the selSupplierName field.
Symptom
When JQuery then finds the field based on the name selSupplierName, it would select the first instance, and not the new rows' bersion of the selSupplierName.
Recommendations
The proper solution would be adding an ID to the cloned row (tr), as this would would make finding the newly created row's child also named selSupplierName easy.
The quick fix would be to select the last instance of selSupplierName, as that is where the new row should technically be residing.
Quick Example of Proposed Fix
$('#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();
})I believe something like this should work in your solution, however as I don't have all your relevant code testing this would be a pain.
Quick Example of the potential Quick Fix
// Select the last instance of the element.
$("#selSupplierName").last().focus();