使用javascript按钮后重置表行

因此，我有以下代码：

$（'input.qty'）.change（函数（）{
var$tr=$（this.closest（'tr'）；
var price=$（this.closest（'tr'）.find（'input.price'）.val（）；
//var price=parseFloat（$tr.find（'td'）.eq（1.text（））；
var qty=parseInt（$（this.val（））；
$（this）.closest（'tr'）.find（'input.amt'）.val（数量*价格）；
});
.tis{
边界：无；
背景色：透明；
}

函数addRow（）{
var table=document.getElementById（“invoiceTableBody”）
table.innerHTML+=
'' +
''+
''+
''+
“选项1”+
“选项2”+
“选项3”+
''+
''+
''+
'' +
'' +
'' +
''; +
'';
};
项目-说明
价格
数量
数量
行动
选择1
选择2
选择3
您犯了一个非常简单的错误，请在此处检查您的代码：

var table = document.getElementById("invoiceTableBody")
 table.innerHTML+=
 '<tr>' +
   '<td>'+
     '<div>'+
       '<select class="try" name="this">'+

       '<option value="Option1">Option 1</option>'+
       '<option value="Option2">Option 2</option>'+
       '<option value="Option3">Option 3</option>'+

       '</select>'+
     '</div>'+
   '</td>'+
   '<td><input type="text" name="l108Price[]" size= "3" class="price tis"></td>' +
   '<td><input type="text" name="l108Qty[]" size= "1" class="qty tis"></td>' +
   '<td><input type= "text" name="l108Amt[]" size= "3" class="amt tis" disabled></td>' +
   '<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'; +
 '</tr>';

var table=document.getElementById（“invoiceTableBody”）
table.innerHTML+=
'' +
''+
''+
''+
“选项1”+
“选项2”+
“选项3”+
''+
''+
''+
'' +
'' +
'' +
''; +
'';

此行中不应有分号：

'<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'; +

”+

您应该将该行更改为：

'<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'+

“”+

所以你的阵营应该是：

var table = document.getElementById("invoiceTableBody")
 table.innerHTML+=
 '<tr>' +
   '<td>'+
     '<div>'+
       '<select class="try" name="this">'+

       '<option value="Option1">Option 1</option>'+
       '<option value="Option2">Option 2</option>'+
       '<option value="Option3">Option 3</option>'+

       '</select>'+
     '</div>'+
   '</td>'+
   '<td><input type="text" name="l108Price[]" size= "3" class="price tis"></td>' +
   '<td><input type="text" name="l108Qty[]" size= "1" class="qty tis"></td>' +
   '<td><input type= "text" name="l108Amt[]" size= "3" class="amt tis" disabled></td>' +
   '<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>' +
 '</tr>';

var table=document.getElementById（“invoiceTableBody”）
table.innerHTML+=
'' +
''+
''+
''+
“选项1”+
“选项2”+
“选项3”+
''+
''+
''+
'' +
'' +
'' +
'' +
'';
该问题是由
table.innerHTML+='…'引起的。声明。

innerHTML
更改对象的HTML，这肯定会影响大小和位置，并至少会触发部分回流。这就是为什么会重置表行的内容

相反，使用
HTMLElement.prototype.insertAdjacentHTML
方法以正确的方式将HTMLElement插入DOM。所以我稍微重写了你的代码：


$（'invoiceTableBody'）。在（'change'，'input.qty'，function（）上{
var$tr=$（this.closest（'tr'）；
var price=$（this.closest（'tr'）.find（'input.price'）.val（）；
//var price=parseFloat（$tr.find（'td'）.eq（1.text（））；
var qty=parseInt（$（this.val（））；
$（this）.closest（'tr'）.find（'input.amt'）.val（数量*价格）；
});
.tis{
边界：无；
背景色：透明；
}

函数addRow（）{
var table=document.getElementById（“invoiceTableBody”）
//将HtmleElement组合为字符串
变量元素=
'' +
'' +
'' +
'' +
“选项1”+
“选项2”+
“选项3”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'';
//将字符串作为HTMLElement插入表元素的末尾
表.insertAdjacentHTML（'beforeend'，元素）；
};
项目-说明
价格
数量
数量
行动
选择1
选择2
选择3
jQuery的一个关键好处是从标记中提取脚本。与其在HTML中使用
onclick
，不如使用jQuery的
click（）
方法（或本机JS事件处理程序）更好地分离关注点。单凭这一点并不能解决问题，但它肯定是有意义的。伙计，这太好了！。现在我想知道为什么我的jquery不适用于新行（数量*金额的东西）。我不是jquery的粉丝，但我已经为您更新了我的答案。这里的问题是，jquery方法不适用于动态添加的HTMLElements，因为它在调用时直接绑定到现有元素。