Javascript 如何将html表格中的行添加到特定行的顶部？

我有一个表格，每一行都有一个按钮，可以在上面添加一个新行。每行都有新的输入

我知道如何在表格顶部添加一行，但不知道如何在单击按钮的每行顶部添加一行。有谁能告诉我如何解决这个问题吗？我也许能做到，但我看到的解决方案非常复杂，我相信一定有更聪明的解决方案

哦，我也不知道如何更新

insertNewRow（id）

函数中发送的参数。 到目前为止，这就是我所拥有的：

<script type="text/javascript">
  function insertNewRow(id){
    var row = document.getElementById("bottomRow");
    var newrow = row.cloneNode(true);
    console.log(newrow);
    var newInputs = newrow.getElementsByTagName('input');

    var allRows = row.parentNode.getElementsByTagName('tr');

    row.parentNode.insertBefore(newrow, row);

    var i=row.rowIndex;
    console.log(i);

}
</script>


<table id="myTable">
    <tr>
        <td>Title1:</td>
        <td></td>
        <td>Title2:</td>
        <td></td>
        <td>Title3:</td>    
        <td></td>
        <td></td>
    </tr>

    <tr>

        <td><input class="c1" readonly maxlength="9" size="7" id="gTop" type="text" value ="11"></td>
        <td> <-></td>
        <td id="l1"><input class="c2"  style="width:35px;" maxlength="9" size="7" type="text" id="lTop" value="33"></td>
        <td>=</td>
        <td id="rv1"><input id="rvTop" input class="c2"  style="width:105px;" maxlength="100" size="37" type="text" value="blahblahblah"></td>
        <td></td>
        <td>x</td>  
    </tr>
    <tr id="bottomRow">                 
        <td><input class="c1" readonly maxlength="9" size="7" id="gBottom" type="text" value =""></td>
        <td> </td>
        <td id="l1"><input class="c2"  style="width:35px;" maxlength="9" size="7" type="text" id="lBottom" value="11"></td>
        <td>=</td>
        <td id="rv1"><input id="rvBottom" input class="c2"  style="width:105px;" maxlength="100" size="37" type="text" value="blahblahblah"></td>
        <td><button type="button" onclick="insertNewRow(1)">+</button></td>
        <td>x</td>                      
    </tr>

</table>

函数insertNewRow（id）{
var行=document.getElementById（“bottomRow”）；
var newrow=row.cloneNode（true）；
console.log（newrow）；
var newInputs=newrow.getElementsByTagName（'input'）；
var allRows=row.parentNode.getElementsByTagName（'tr'）；
row.parentNode.insertBefore（newrow，row）；
var i=row.rowIndex；
控制台日志（i）；
}
标题1：
标题2：
标题3：
=
x
=
+
x

在

onclick

属性中，不只是调用

insertNewRow（）

，而是执行以下操作

insertNewRow.apply(this);

onclick

属性中的

this

关键字是已单击元素的引用。使用

insertNewRow.apply（this）

，我们将调用

insertNewRow（）

，同时，将该函数调用中的

this

关键字分配给单击的元素，或者在本例中，分配给按钮（如果我们不这样做，

this

insertNewRow（）内）将成为对

窗口

对象的引用）。然后在

insertNewRow（）

函数中，检查当前单击的元素是否是

tr

元素。如果不是，则上升一级，查看该元素是否为

tr

元素。继续这样做，直到到达第一个

tr

元素。因此，基本上您将搜索最近的

tr

元素

+

函数insertNewRow（）{
var行=空，
el=这个；
//获取最近的tr元素
while（行===null）
{
if（el.tagName.toLowerCase（）=='tr'）
{
row=el；//row现在是最近的tr元素
打破
}
el=el.parentNode；
}
//剩下的代码在这里
}​

---

如果您仍然不确定什么是<代码>函数。Apple（）/代码>，请查看文档。

您会考虑在解决方案中使用jQuery吗？这会让事情变得容易很多，谢谢你的建议，但是我不能使用jQuery（这不是我的选择…）