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);

this属性中的onclick关键字是被点击元素的引用。使用insertNewRow.apply(this)，我们将调用insertNewRow()，同时将该函数调用中的this关键字分配给点击的元素，或者在这种情况下，按钮（如果我们不知道）要做到这一点，this内的insertNewRow()将是对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。

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

1 个答案: