Javascript 无法在表中动态添加新行

我试图在用户端的表中添加新行。 我已经这样做了，但它只在第一次进入新行，当您第二次单击AddRow按钮时，什么也没发生

函数insTableRow（tableID）{
var x=document.getElementById（tableID）；
var get_row=x.rows[2]；
get_row.style.display=''；
console.log（获取_行）；
$（“#”+tableID+“tbody”）.append（获取行）；
}

机构名称
资格
入院日期
毕业日期
度扫描图像
行动

您的问题是因为您选择了同一行，并在每次单击时追加该行。您没有创建新行。要解决此问题，可以克隆行并附加新实例

还请注意，您应该避免在HTML中对*事件处理程序使用过时的

。由于您已经在页面中包含了jQuery，因此可以使用它将事件附加到HTML之外。此外，您可以使用
删除
图标上的委托事件处理程序删除单击的行。试试这个：


$（'#添加'）。单击（函数（）{
var$row=$（“#educationTable”）.find（'tr:last'）；
$row.clone（）.insertBefore（$row.show（）；
});
$（'#educationTable'）。在（'click'，'delete'，function（）上{
$（this）.closest（'tr'）.remove（）；
});

机构名称
资格
入院日期
毕业日期
度扫描图像
行动
您的问题是因为您选择了同一行，并在每次单击时追加该行。您没有创建新行。要解决此问题，可以克隆行并附加新实例

还请注意，您应该避免在HTML中对*
事件处理程序使用过时的
。由于您已经在页面中包含了jQuery，因此可以使用它将事件附加到HTML之外。此外，您可以使用
删除
图标上的委托事件处理程序删除单击的行。试试这个：


$（'#添加'）。单击（函数（）{
var$row=$（“#educationTable”）.find（'tr:last'）；
$row.clone（）.insertBefore（$row.show（）；
});
$（'#educationTable'）。在（'click'，'delete'，function（）上{
$（this）.closest（'tr'）.remove（）；
});

机构名称
资格
入院日期
毕业日期
度扫描图像
行动
这个怎么样

克隆初始行以创建新行，而不是显示
display:none
行


函数insTableRow（tableID）{
var x=document.getElementById（tableID）；
var get_row=$（x.rows[1]）.clone（）；
$（“#”+tableID+“tbody”）.append（获取行）；
}

机构名称
资格
入院日期
毕业日期
度扫描图像
行动
这个怎么样

克隆初始行以创建新行，而不是显示
display:none
行


函数insTableRow（tableID）{
var x=document.getElementById（tableID）；
var get_row=$（x.rows[1]）.clone（）；
$（“#”+tableID+“tbody”）.append（获取行）；
}

机构名称
资格
入院日期
毕业日期
度扫描图像
行动
因为它不是新行：它始终是同一行，而且您已经多次分配了id“number”。那不是一个好的做法。尝试为每个元素指定唯一的ID。您之前发布的问题中的示例与此示例之间有一个重要区别：您没有克隆行。这意味着，你不是在创建新行，你总是在最后追加同一行，所以显然你看不到另一行出现。你需要创建一个新行，然后追加它。使用此链接@Umesh仅供参考，不要将W3Schools用作参考。他们的文章经常过时，有时甚至完全错了。MDN更加全面和准确：因为它不是一个新行：它总是同一行，而且您已经多次分配id“number”。那不是一个好的做法。尝试为每个元素指定唯一的ID。您之前发布的问题中的示例与此示例之间有一个重要区别：您没有克隆行。这意味着，你不是在创建新行，你总是在最后追加同一行，所以显然你看不到另一行出现。你需要创建一个新行，然后追加它。使用此链接@Umesh仅供参考，不要将W3Schools用作参考。他们的文章经常过时，有时甚至完全错了。MDN更全面、更准确：虽然这样做有效，但您需要记住在克隆它之后清除行中的值。虽然这样做有效，但您需要记住在克隆它之后清除行中的值