javascript - 如何在 html 表格中的特定行顶部添加行？

Question

我有一个表格，每一行都有一个按钮，用于在其顶部添加新行。每行都有新的输入。

我知道如何在表格顶部添加一行，但不知道如何在我单击按钮的每一行顶部添加一行。有人会建议如何解决它吗？我也许能做到，但我看到的解决方案非常复杂，我确信一定有一个更聪明的解决方案。

哦，我也不知道如何更新 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>

Answer 1

在 onclick 属性中，不要只调用 insertNewRow()，而是执行类似的操作

insertNewRow.apply(this);

onclick 属性内的 this 关键字是被单击元素的引用。使用 insertNewRow.apply(this)，我们将调用 insertNewRow()，同时在该函数内分配 this 关键字调用被点击的元素，或者在本例中，按钮(如果我们不这样做，insertNewRow() 内的 this 将是对 Window 的引用 对象代替)。然后在 insertNewRow() 函数中，检查当前单击的元素是否为 tr 元素。如果不是，则上移一级并查看该元素是否为 tr 元素。继续这样做，直到到达第一个 tr 元素。因此，基本上您将搜索最接近的 tr 元素。

<button type="button" onclick="insertNewRow.apply(this);">+</button>

function insertNewRow(){
    var row = null,
        el = this;
    // Get the closest tr element
    while (row === null)
    {
        if (el.tagName.toLowerCase() === 'tr')
        {
            row = el; // row is now the closest tr element
            break;
        }
        el = el.parentNode;                 
    }

    // Rest of the code here

}​

JsFiddle

如果您仍然不确定 Function.apply() 是什么，请查看文档 here .