Javascript 追加的新行的行为与上一行（行）不同

我有一个HTML表格在旁边，我有几个

td

作为

input

字段，我的表格是动态的，当页面加载时，我在表格的第一行追加

focus

，在我的例子中，即

项目名称

我的行中有3个输入字段，分别是

项目名称

、

单位数量

和

光盘%

• 当用户在

  ItemName

  输入字段中单击时，我正在从数组中的数据对象中搜索ItemName，以填充ItemName
• 选择

  项目名称

  后，我将焦点移动到下一个输入字段，即

  单位数量

  ，然后在该焦点移动到下一个输入字段，即

  光盘%

  ，在此之间进行一些计算，以计算

  总金额

• 然后，当用户从

  Disc%

  中调出焦点时，我将追加一个新行，实际上我有一个函数，其中包含用于追加该行的代码，因此我在

  Disc%

  中调出焦点时调用该函数
• 从

  Disc%

  中调出焦点后，我希望我的焦点应该转到新行的

  ItemName

  ，并且应该表现得像以前一样（像从数据中搜索），等等

我已经对代码中的行进行了注释，以便用户更好地了解发生在哪里的情况

函数rowappend（）//这个函数正在追加行
{
var标记=“”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
''
$（“表tbody”）。追加（标记）；
$（“itemNametd”）.next（）.focus（）；
}
行附加（）
var data=[//填充项目名称搜索输入字段的数据
{
“项目名称”：“黄油”
},
{
“项目名称”：“大米”
},
{
“项目名称”：“牛奶”
},
{
“商品名称”：“冰淇淋”
},
{
“项目名称”：“凝乳”
}
]
var data1=[{//此数据将是动态的，但现在为了测试，我使用的是单个数据
“项目名称”：“黄油”，
“项目代码”：400564，
“净化”：8，
“DiscAmt”：6，
“GST百分比”：35，
“gstAmt”：5
}]
var totalAmount=“”；
var unitQuantity=“”；
$（函数（）{
让itemName=data.map（值=>{//使用autocomplete to搜索输入字段
返回值.ItemName；
});
$（“#itemNametd”）.autocomplete({
来源：itemName
});
});
$（“#itemNametd”）.focusout（函数（）{//当用户从项名称进行此操作时
data1.map（值=>{
$（“#itemCodetd”）.text（value.ItemCode）；
$（“#purRatetd”）.text（value.PurRate）；
$（“#discAmttd”）.text（value.DiscAmt）；
$（“#gstPercentahgetd”）.text（value.gstPercentage）；
$（“#gstAmttd”）.text（value.gstAmt）；
});
});
$（“#unitQtytd”）.focusout（函数（）{//当用户对单位数量进行某些计算时
unitQuantity=$（“#unitQtytd”）.val（）；
purchaseRate=$（“#purRatetd”）.text（）；
总金额=（帕塞因特（单位数量）*帕塞因特（采购率））；
$（“#totalAmttd”）.text（总金额）；
});
$（“#dispercentagetd”）.focusout（function（）{//在这里，当用户是focusout时，我调用正在创建新行的fuinction
行附加（）
});

项目名称
项目代码
单位数量
采购价格
光盘%
盘式自动变速器
商品及服务税%
消费税金额
总金额
在本例中，您可以指定元素选择器目标标记。
创建新的DOM元素后，必须再次添加侦听器


函数rowappend（）//这个函数正在追加行
{
变量标记=$（''）+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'');
$（“表tbody”）。追加（标记）；
$（“#itemNametd”，markup）.focus（）；
}
行附加（）
var data=[//填充项目名称搜索输入字段的数据
{
“项目名称”：“黄油”
},
{
“项目名称”：“大米”
},
{
“项目名称”：“牛奶”
},
{
“商品名称”：“冰淇淋”
},
{
“项目名称”：“凝乳”
}
]
var data1=[{//此数据将是动态的，但现在为了测试，我使用的是单个数据
“项目名称”：“黄油”，
“项目代码”：400564，
“净化”：8，
“DiscAmt”：6，
“GST百分比”：35，
“gstAmt”：5
}]
var totalAmount=“”；
var unitQuantity=“”；
$（函数（）{
让itemName=data.map（值=>{//使用autocomplete to搜索输入字段
返回值.ItemName；
});
$（“#itemNametd”）.autocomplete({
来源：itemName
});
});
$（“#itemNametd”）.focusout（函数（）{//当用户从项名称进行此操作时
data1.map（值=>{
$（“#itemCodetd”）.text（value.ItemCode）；
$（“#purRatetd”）.text（value.PurRate）；
$（“#discAmttd”）.text（value.DiscAmt）；
$（“#gstPercentahgetd”）.text（value.gstPercentage）；
$（“#gstAmttd”）.text（value.gstAmt）；
});
});
$（“#unitQtytd”）.focusout（函数（）{//当用户对单位数量进行某些计算时
unitQuantity=$（“#unitQtytd”）.val（）；
purchaseRate=$（“#purRatetd”）.text（）；
总金额=（帕塞因特（单位数量）*帕塞因特（采购率））；
$（“#totalAmttd”）.text（总金额）；
});
$（'body'）。on（'focusout'，'disccentagetd'，function（）{
行附加（）
});

项目名称
项目代码
单位数量
采购价格
光盘%
盘式自动变速器
商品及服务税%
消费税金额
总金额
您的代码有几个问题

最重要的两个是


使用具有相同
id
的多个元素。但是
id
s必须是唯一的。如果多个元素具有相同的id（CSS不同），JavaScript/jQuery将始终使用第一个元素。我在这里使用了
name
而不是
id
将事件侦听器添加到运行时不存在的元素中。当您收听
focusout
事件时，仅创建第一个输入行。我在整个文档上收听
focusout
事件。如果你的注意力不集中