仅使用javascript在HTML表中添加和删除行

我的任务是创建一个带有添加和删除按钮的HTML表。删除按钮应位于每一行中，以删除整行并自动编制索引。我在索引和添加行后面临问题。如何放置删除按钮

函数deleteRow（r）{
var i=r.parentNode.parentNode.rowIndex；
document.getElementById（“myTable”）.deleteRow（i）；
}
函数addRow（）{
var name=document.getElementById（“name”）.value；
var classVariable=document.getElementById（“类”）.value；
var table=document.getElementsByTagName（“表”）[0]
var newRow=table.insertRow（-1）；
var cell1=newRow.insertCell（0）；
var cell2=newRow.insertCell（1）；
var cell3=newRow.insertCell（2）；
var cell4=newRow.insertCell（3）；
cell1.innerHTML=“5”；
cell2.innerHTML=名称；
cell3.innerHTML=类变量；
}

指数
名称
等级
1.
约翰
10
2.
雌鹿
9
3.
做记号
10
4.
詹姆斯
8.
姓名：
类别：

我创建了reindex函数，它通过索引遍历所有列，并将它们设置为迭代器值+1。在删除或添加行的末尾调用此函数。这样可以保持索引正确

为了添加deletebutton，我创建了新的button元素，并使用setAttribute添加了onclick

函数deleteRow（r）{
var i=r.parentNode.parentNode.rowIndex；
document.getElementById（“myTable”）.deleteRow（i）；
reindex（）；
}
函数reindex（）{
const-id=document.queryselectoral（“tr>td:n个子项（1）”；
forEach（（e，i）=>{e.innerText=（i+1）}）；
}
函数addRow（）{
var name=document.getElementById（“name”）.value；
var classVariable=document.getElementById（“类”）.value；
var table=document.getElementsByTagName（“表”）[0]；
//删除按钮
var button=document.createElement（“按钮”）；
button.innerHTML=“删除”；
setAttribute（“onclick”、“deleteRow（this）”）；
var newRow=table.insertRow（-1）；
var cell1=newRow.insertCell（0）；
var cell2=newRow.insertCell（1）；
var cell3=newRow.insertCell（2）；
var cell4=newRow.insertCell（3）；
cell1.innerHTML=“5”；
cell2.innerHTML=名称；
cell3.innerHTML=类变量；
单元格4.追加子项（按钮）；
reindex（）；
}

指数
名称
等级
1.
约翰
10
2.
雌鹿
9
3.
做记号
10
4.
詹姆斯
8.
姓名：
类别：

我有这个解决方案，也许你可以使用这个代码。它还防止用户再次输入相同的值

document.addEventListener（“DOMContentLoaded”），函数（事件）{
var table=document.getElementById（'myTable'）；
var rows=table.getElementsByTagName（“tr”）；
var buttons=table.getElementsByTagName（“按钮”）；
var newbutton=document.getElementById（“新”）；
var namefield=document.getElementById（“名称”）；
var classfield=document.getElementById（“类”）；
函数createIndex（）{
对于（变量i=0；i0）{
行[i].firstElementChild.innerHTML=i；
}
}
对于（变量i=0；i

指数
名称
等级
1.
约翰
10
删除
2.
雌鹿
9
删除
3.
做记号
10
删除
4.
詹姆斯
8.
删除
姓名：
类别：
+添加
当您创建一个代码段时，您有更好的机会得到好的答案！您自己也会经常发现错误。如何将编辑功能添加到此？？如何将编辑功能添加到此？？