Javascript 单击按钮创建新行

我有一个包含一行或多行的html表。我的表中有4列，其中一列是复选框。有两个按钮“AddRowUpper”和“AddRowDown”。选中特定复选框并单击按钮时，应根据按钮名称添加新行。我的代码看起来像这样，不确定如何实现结果

函数addNewRowOver（）{
警报（“已采取行动！！！”；
var rowNumber=document.getElementById（“rowIndex”）.value；
var rowNumberNew=parseInt（rowNumber）-1；
警报（rowNumber+“-”+rowNumberNew）；
var newRow=$（''）.attr（'id'，'row'+rowNumberNew）；
html（“”）；
$（“#maintable tbody”）.append（newRow）；
}
函数addNewRowLower（）{
警报（“已采取行动！！！”；
var rowNumber=document.getElementById（“rowIndex”）.value；
var rowNumberNew=parseInt（rowNumber）+1；
警报（rowNumber+“-”+rowNumberNew）；
var newRow=$（''）.attr（'id'，'row'+rowNumberNew）；
html（“”）；
$（“#maintable tbody”）.append（newRow）；
}

挑选
员工ID
名字
姓

您可以使用在按钮上方追加新行（将

id=“button”

添加到行内容按钮）。尝试以下解决方案：

函数addNewRowOver（）{
警报（“已采取行动！！！”；
var rowNumber=document.getElementById（“rowIndex”）.value；
var rowNumberNew=parseInt（rowNumber）-1；
警报（rowNumber+“-”+rowNumberNew）；
var newRow=$（''）.attr（'id'，'row'+rowNumberNew）；
html（“”）；
newRow.insertBefore（“#按钮”）；
}
函数addNewRowLower（）{
警报（“已采取行动！！！”；
var rowNumber=document.getElementById（“rowIndex”）.value；
var rowNumberNew=parseInt（rowNumber）+1；
警报（rowNumber+“-”+rowNumberNew）；
var newRow=$（''）.attr（'id'，'row'+rowNumberNew）；
html（“”）；
$（“#maintable tbody”）.append（newRow）；
}

挑选
员工ID
名字
姓

我添加了

var selectedRow=$（“输入：已选中”）.parent（）.parent（）以查找选中元素的父行，然后使用
$（newRow）.insertBefore（selectedRow）或
$（新行）。插入后面（selectedRow）取决于单击的按钮

希望这能有所帮助

更新：

为了响应请求即使在动态添加行之后也保持行id有序的注释，我添加了一个
SortRowIDs（）
函数，该函数在
addnewrowUpper（）
和
addnewrowDown（）的末尾调用

此函数获取
中的所有
标记，然后使用jQuery的
.each（）
方法对它们进行迭代。然后根据复选框在表中的顺序为其父行分配一个Id。我还在代码中添加了一些注释，以便更容易理解



函数SortRowIDs（）{
//下面的代码将查找表中包含复选框的所有元素。
//这样，我们将跳过包含列标题的第一行和包含按钮的最后一行
//我们使用jQuery.each（）方法迭代jQuery对象数组
$（'#maintable'）。查找（'tr>td>input[type=“checkbox”]”）。每个（函数（索引）{
//我们将当前复选框的父行指定给变量“currentRow”
让currentRow=$（this.parent（）.parent（）；
//这里，我们根据当前行在表中的位置为其提供一个id
$（currentRow）.attr（'id'，'id'+（index+1））；
//打印每行的id
log（'Current row's id:'+$（currentRow.attr（'id'））；
});
//这将打印所选复选框父行的id属性，以显示
//SortRowIDs（）函数已成功分配Id
控制台日志（“”）；
console.log（'Selected row's id:'+$（'input:checked'）.parent（）.parent（）.attr（'id'））；
}
函数addNewRowOver（）{
var rowNumber=document.getElementById（“rowIndex”）.value；
var rowNumberNew=parseInt（rowNumber）-1；
var newRow=$（''）；
html（“”）；
var selectedRow=$（“输入：已选中”）.parent（）.parent（）；
$（newRow）.insertBefore（selectedRow）；
SortRowIDs（）；
}
函数addNewRowLower（）{
var rowNumber=document.getElementById（“rowIndex”）.value；
var rowNumberNew=parseInt（rowNumber）+1；
var newRow=$（''）；
html（“”）；
var selectedRow=$（“输入：已选中”）.parent（）.parent（）；
$（新行）.insertAfter（selectedRow）；
SortRowIDs（）；
}
挑选
员工ID
名字
姓
首先，
id
是唯一的，因此您不应该使用与
id=“rowIndex”
相同的
id
设置不同的元素。其次，您的表没有
。请加上。上面和下面的参考资料是什么？用户单击的复选框？@MrNeo我不知道如何获取每行的行号。请建议一个最佳方法。是的，应单击复选框。现在没有添加验证。我只是复制了这段代码，它只会在单击时闪烁。但在这里，当我运行代码时，它是有效的！！！！陛下