附加的新行与前一行(行)的行为不同 [英] Appended new row is not behaving like previous one (row)

问题描述

我有一个 HTML 表格，其中有几个 td 作为 input 字段，我的表格是动态的，当页面加载时，我将附加表格的第一行和 focus 在第一个输入字段，在我的例子中，即 Item Name

我的行中有 3 个输入字段，它们是 Item Name、Unit Qty 和 Disc%

• 当用户在 ItemName 输入字段内单击时，我正在从数组中的对象数据中搜索 itemnames 以填充 itemnames
• 选择Item NAme后，我将焦点移到下一个输入字段，即Unit Qty，然后将焦点移到下一个输入字段，即Disc% 在这之间发生了一些计算来计算 Total Amount
• 然后，当用户从 Disc% 焦点移出时，我将追加一个新行，实际上我有一个函数，其中我有代码来追加该行，所以我正在调用该函数Disc%
的焦点
• 焦点离开 Disc% 后，我希望我的焦点应该转到新行的 ItemName 并且应该表现得像它的行为(比如从数据中搜索)等等在

我对代码中的行进行了注释，以便用户更好地了解发生了什么

function rowappend()//这是追加行{var markup = '<tr><td><input type="text" class="form-control command"name="itemNametd" id="itemNametd">'+'</td><td id="itemCodetd" class="commantd"></td>'+'<td><input type="text" class="form-control commandd"name="unitQtytd" id="unitQtytd"></td>'+'<td id="purRatetd" class="commantd"></td>'+'<td><input type="text" class="form-control command"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();}行追加()var data = [//要填充项目名称搜索输入字段的数据{物品名称":黄油"},{物品名称":米饭"},{物品名称":牛奶"},{"ItemName": "冰淇淋"},{"物品名称": "凝乳"}]var data1 = [{//此数据将是动态的，但现在为了测试我正在使用此单个数据"ItemName": "黄油",项目代码":400564，"PurRate": 8,"DiscAmt": 6,"gstPercentage": 35,gstAmt":5}]var totalAmount = "";var unitQuantity = "";$(函数(){let itemName = data.map(value => {//使用自动完成来搜索输入字段返回值.ItemName;});$("#itemNametd").自动完成({来源:项目名称});});$("#itemNametd").focusout(function() {//当用户从项目名称焦点移出时执行此操作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() {//当用户关注单元数量做一些计算unitQuantity = $("#unitQtytd").val();purchaseRate = $("#purRatetd").text();totalAmount = (parseInt(unitQuantity) * parseInt(purchaseRate));$("#totalAmttd").text(totalAmount);});$("#discPercentagetd").focusout(function() {//这里当用户注意力不集中时，我正在调用正在创建新行的函数行追加()});

<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"><头><tr><th id="itemNameth" class="commanth">项目名称</th><th id="itemCodeth" class="commanth">项目代码</th><th id="unitQtyth" class="commanth">单位数量</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">总金额</th></tr></thead></tbody>

从我的角度来看，我认为我使用错误的方法来完成这项任务

注意 :- 将来我可能会在每个焦点上做一些计算，所以请以这种方式帮助我

我已经提供了所有信息，如果还不够，大家可以在评论中问我

编辑

根据 Wils 的回答，从 Disc% 焦点移出后，新行正在追加，焦点也转移到新行的 Item Name 但问题是当我在 Item Name 的输入字段中键入 m 时，当新行追加时 autocomplete 最初不在第一行中工作>m 显示为下拉菜单，但第二行没有显示

function rowappend()//这是追加行{var markup = $('<tr><td><input type="text" class="form-control command"name="itemNametd" id="itemNametd">' +'</td><td id="itemCodetd" class="commantd"></td>'+'<td><input type="text" class="form-control commandd"name="unitQtytd" id="unitQtytd"></td>'+'<td id="purRatetd" class="commantd"></td>'+'<td><input type="text" class="form-control command"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", 标记).focus();}行追加()var data = [//要填充项目名称搜索输入字段的数据{物品名称":黄油"},{物品名称":米饭"},{物品名称":牛奶"},{"ItemName": "冰淇淋"},{"物品名称": "凝乳"}]var data1 = [{//此数据将是动态的，但现在为了测试我正在使用此单个数据"ItemName": "黄油",项目代码":400564，"PurRate": 8,"DiscAmt": 6,"gstPercentage": 35,gstAmt":5}]var totalAmount = "";var unitQuantity = "";$(函数(){let itemName = data.map(value => {//使用自动完成来搜索输入字段返回值.ItemName;});$("#itemNametd").自动完成({来源:项目名称});});$("#itemNametd").focusout(function() {//当用户从项目名称焦点移出时执行此操作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() {//当用户关注单元数量做一些计算unitQuantity = $("#unitQtytd").val();purchaseRate = $("#purRatetd").text();totalAmount = (parseInt(unitQuantity) * parseInt(purchaseRate));$("#totalAmttd").text(totalAmount);});$('body').on('focusout', '#discPercentagetd', function() {行追加()});

<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"><头><tr><th id="itemNameth" class="commanth">项目名称</th><th id="itemCodeth" class="commanth">项目代码</th><th id="unitQtyth" class="commanth">单位数量</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">总金额</th></tr></thead></tbody>

这里的任何人都请帮助我

解决方案

你的代码有几个问题

最重要的两个是

• 您使用多个具有相同 id 的元素.但是 ids 必须是唯一的.如果多个元素相同(CSS 不同)，JavaScript/jQuery 将始终使用带有 id 的第一个元素.我在这里使用了 name 而不是 id
• 您向元素添加事件侦听器，这些元素在运行时并不存在.当您侦听 focusout 事件时，只会创建第一个输入行.我在整个文档上收听 focusout 事件.如果您不关注输入，则该事件将冒泡到 document，在那里我决定根据事件的 target 属性执行什么操作.

我对您的代码进行了一些重构并进行了一些改进，但还远远不够完美.

"use strict";控制台清除()const data = [//要填充项目名称搜索输入字段的数据{"ItemName": "黄油"},{"ItemName": "米饭"},{"ItemName": "牛奶"},{"ItemName": "冰淇淋"},{"ItemName": "凝乳"}]const data1 = {//该数据将是动态的，但现在为了测试我正在使用这个单一数据黄油: {"ItemName": "黄油",项目代码":400564，"PurRate": 8,"DiscAmt": 6,"gstPercentage": 35,gstAmt":5},白饭: {"ItemName": "米饭",项目代码":400565，"PurRate": 3,"DiscAmt": 2,"gstPercentage": 20,gstAmt":8},牛奶: {"ItemName": "牛奶",项目代码":200569，"PurRate": 1,DiscAmt":1，"gstPercentage": 50,gstAmt":2},'冰淇淋': {"ItemName": "冰淇淋",项目代码":800002，"PurRate": 16,"DiscAmt": 2,"gstPercentage": 15,gstAmt":2},凝乳: {"ItemName": "凝乳",项目代码":100289，"PurRate": 9,DiscAmt":1，"gstPercentage": 12,gstAmt":4},}var totalAmount = "";var unitQuantity = "";function rowappend(tbody) {//这是追加行{const 标记 =`<td><input type="text" class="form-control commandd" name="itemNametd"></td><td name="itemCodetd" class="commantd"></td><td><input type="text" class="form-control commandd" name="unitQtytd"></td><td name="purRatetd" class="commantd"></td><td><input type="text" class="form-control commandd" name="discPercentagetd"></td><td name="discAmttd" class="commantd"></td><td name="gstPercentagetd" class="commantd"></td><td name="gstAmttd" class="commantd"></td><td name="totalAmttd" class="commantd"></td></tr>`$(tbody).append(markup);setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);const itemName = data.map(value => {//使用自动完成来搜索输入字段返回值.ItemName;});$("[name=itemNametd]", tbody).last().autocomplete({来源:项目名称});}rowappend($('tbody', '#tableInvoice'))函数 getValues(row) {const search = ($('[name=itemNametd]', row).val()).toString()const value = data1[search.toLowerCase()];如果(值){$(row).find("[name=itemCodetd]").text(value.ItemCode);$(row).find("[name=purRatetd]").text(value.PurRate);$(row).find("[name=discAmttd]").text(value.DiscAmt);$(row).find("[name=gstPercentahgetd]").text(value.gstPercentage);$(row).find("[name=gstAmttd]").text(value.gstAmt);}}函数计算(行){const unitQuantity = $(row).find("[name=unitQtytd]").val();const purchaseRate = $(row).find("[name=purRatetd]").text();const totalAmount = (parseInt(unitQuantity) * parseInt(purchaseRate));$(row).find("[name=totalAmttd]").text(totalAmount);}$(document).on('focusout', (e) => {const row = e.target.parentElement.parentElementif (e.target.matches('[name=discPercentagetd]')) {if ($(row).parent().find('tr').length - $(row).index() === 1) {//只有最后一行rowappend(e.target.parentElement.parentElement.parentElement)}}if (e.target.matches('[name=unitQtytd]')) {计算(e.target.parentElement.parentElement)}if (e.target.matches("[name=itemNametd]")) {getValues(e.target.parentElement.parentElement)}});

<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 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/><link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/><div class="container commonDivInvoice"><div class="row tableInvoice" id="commonDvScroll"><table class="table table-bordered" id="tableInvoice"><头><tr><th id="itemNameth" class="commanth">项目名称</th><th id="itemCodeth" class="commanth">项目代码</th><th id="unitQtyth" class="commanth">单位数量</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">总金额</th></tr></thead></tbody>