У меня есть HTML-таблица в стороне, в которой у меня есть несколько полей td как input, моя таблица динамическая, когда при загрузке страницы я добавляю 1-ю строку моей таблицы и focus в первое поле ввода, в мой случай то есть Item Name
В моей строке 3 поля ввода: Item Name, Unit Qty и Disc%
- Когда пользователь щелкает внутри
ItemName поля ввода, я ищу имена элементов из данных, которые являются объектами внутри массива для заполнения имен элементов
- После выбора
Item NAme я перемещаю свой фокус на следующее поле ввода, равное Unit Qty, затем после этого фокуса на следующее поле ввода, которое находится между значениями Disc%, между ними происходят некоторые вычисления для вычисления Total Amount
- Затем, после этого, когда пользователь выходит из фокуса с
Disc%, я добавляю новую строку, на самом деле у меня есть функция, внутри которой у меня есть код для добавления строки, поэтому я вызываю эту функцию на фокусе из Disc%
- После фокуса из
Disc% я хочу, чтобы мой фокус переместился на ItemName новой строки и должен вести себя так, как он себя ведет (как поиск по данным) и так далее
Я прокомментировал строки в моем коде, чтобы лучше понять, что происходит, где
function rowappend() // this one is appending row
{
var markup = '<tr><td><input type="text" class="form-control commantd"name="itemNametd" id="itemNametd">' +
'</td><td id="itemCodetd" class="commantd"></td>' +
'<td><input type="text" class="form-control commantd"name="unitQtytd" id="unitQtytd"></td>' +
'<td id="purRatetd" class="commantd"></td>' +
'<td><input type="text" class="form-control commantd"name="discPercentagetd" id="discPercentagetd"></td>' +
'<td id="discAmttd" class="commantd"></td>' +
'<td id="gstPercentagetd" class="commantd"></td>' +
'<td id="gstAmttd" class="commantd"></td>' +
'<td id="totalAmttd" class="commantd"></td></tr>'
$("table tbody").append(markup);
$("itemNametd").next().focus();
}
rowappend()
var data = [ //data to populate Item Name search input field
{
"ItemName": "Butter"
},
{
"ItemName": "Rice"
},
{
"ItemName": "Milk"
},
{
"ItemName": "Ice Cream"
},
{
"ItemName": "Curd"
}
]
var data1 = [{ // this data will be dynamic but for now to test i am using this single data
"ItemName": "Butter",
"ItemCode": 400564,
"PurRate": 8,
"DiscAmt": 6,
"gstPercentage": 35,
"gstAmt": 5
}]
var totalAmount = "";
var unitQuantity = "";
$(function() {
let itemName = data.map(value => { //using autocomplete to for searching input field
return value.ItemName;
});
$("#itemNametd").autocomplete({
source: itemName
});
});
$("#itemNametd").focusout(function() { //when user focus out from Item Name doing this
data1.map(value => {
$("#itemCodetd").text(value.ItemCode);
$("#purRatetd").text(value.PurRate);
$("#discAmttd").text(value.DiscAmt);
$("#gstPercentahgetd").text(value.gstPercentage);
$("#gstAmttd").text(value.gstAmt);
});
});
$("#unitQtytd").focusout(function() { //when user focus out Unit Qty doing some calculation
unitQuantity = $("#unitQtytd").val();
purchaseRate = $("#purRatetd").text();
totalAmount = (parseInt(unitQuantity) * parseInt(purchaseRate));
$("#totalAmttd").text(totalAmount);
});
$("#discPercentagetd").focusout(function() { //here when user is focus out i am calling the fuinction which is creating new row
rowappend()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="container commonDivInvoice">
<div class="row tableInvoice" id="commonDvScroll">
<table class="table table-bordered" id="tableInvoice">
<thead>
<tr>
<th id="itemNameth" class="commanth">Item Name</th>
<th id="itemCodeth" class="commanth">Item Code</th>
<th id="unitQtyth" class="commanth">Unit Qty</th>
<th id="purRateth" class="commanth">Pur.Rate</th>
<th id="discPercentageth" class="commanth">Disc%</th>
<th id="discAmtth" class="commanth">Disc Amt</th>
<th id="gstPercentageth" class="commanth">Gst%</th>
<th id="gstAmtth" class="commanth">Gst Amt</th>
<th id="totalAmtth" class="commanth">Total Amount</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
Со своей стороны, я думаю, что использую неправильный подход для решения этой задачи
ПРИМЕЧАНИЕ: - в будущем при каждой фокусировке я могу делать некоторые расчеты, поэтому, пожалуйста, помогите мне таким образом
Я предоставил всю информацию, если ее недостаточно, тогда вы все можете спросить меня в комментариях
EDIT
согласно Wils's ответу после фокуса из Disc% добавляется новая строка, и фокус также перемещается на Item Name новой строки, но проблема заключается в том, что при добавлении новой строки autocomplete изначально не работает в первой строке когда страница загружается, когда я набираю m внутри поля ввода Item Name, все имя элемента, содержащее m, отображается как раскрывающийся список, но для 2-й строки оно не отображается
function rowappend() // this one is appending row
{
var markup = $('<tr><td><input type="text" class="form-control commantd"name="itemNametd" id="itemNametd">' +
'</td><td id="itemCodetd" class="commantd"></td>' +
'<td><input type="text" class="form-control commantd"name="unitQtytd" id="unitQtytd"></td>' +
'<td id="purRatetd" class="commantd"></td>' +
'<td><input type="text" class="form-control commantd"name="discPercentagetd" id="discPercentagetd"></td>' +
'<td id="discAmttd" class="commantd"></td>' +
'<td id="gstPercentagetd" class="commantd"></td>' +
'<td id="gstAmttd" class="commantd"></td>' +
'<td id="totalAmttd" class="commantd"></td></tr>');
$("table tbody").append(markup);
$("#itemNametd", markup).focus();
}
rowappend()
var data = [ //data to populate Item Name search input field
{
"ItemName": "Butter"
},
{
"ItemName": "Rice"
},
{
"ItemName": "Milk"
},
{
"ItemName": "Ice Cream"
},
{
"ItemName": "Curd"
}
]
var data1 = [{ // this data will be dynamic but for now to test i am using this single data
"ItemName": "Butter",
"ItemCode": 400564,
"PurRate": 8,
"DiscAmt": 6,
"gstPercentage": 35,
"gstAmt": 5
}]
var totalAmount = "";
var unitQuantity = "";
$(function() {
let itemName = data.map(value => { //using autocomplete to for searching input field
return value.ItemName;
});
$("#itemNametd").autocomplete({
source: itemName
});
});
$("#itemNametd").focusout(function() { //when user focus out from Item Name doing this
data1.map(value => {
$("#itemCodetd").text(value.ItemCode);
$("#purRatetd").text(value.PurRate);
$("#discAmttd").text(value.DiscAmt);
$("#gstPercentahgetd").text(value.gstPercentage);
$("#gstAmttd").text(value.gstAmt);
});
});
$("#unitQtytd").focusout(function() { //when user focus out Unit Qty doing some calculation
unitQuantity = $("#unitQtytd").val();
purchaseRate = $("#purRatetd").text();
totalAmount = (parseInt(unitQuantity) * parseInt(purchaseRate));
$("#totalAmttd").text(totalAmount);
});
$('body').on('focusout', '#discPercentagetd', function() {
rowappend()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="container commonDivInvoice">
<div class="row tableInvoice" id="commonDvScroll">
<table class="table table-bordered" id="tableInvoice">
<thead>
<tr>
<th id="itemNameth" class="commanth">Item Name</th>
<th id="itemCodeth" class="commanth">Item Code</th>
<th id="unitQtyth" class="commanth">Unit Qty</th>
<th id="purRateth" class="commanth">Pur.Rate</th>
<th id="discPercentageth" class="commanth">Disc%</th>
<th id="discAmtth" class="commanth">Disc Amt</th>
<th id="gstPercentageth" class="commanth">Gst%</th>
<th id="gstAmtth" class="commanth">Gst Amt</th>
<th id="totalAmtth" class="commanth">Total Amount</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
Кто-нибудь здесь, пожалуйста, помогите мне