0

テーブルがあり、各行にはその上に新しい行を追加するためのボタンがあります。各行には新しい入力があります。

テーブルの上に行を追加する方法は知っていますが、ボタンをクリックしている各行の上にはありません。誰かがそれを解決する方法についてのヒントを持っていますか? できるかもしれませんが、解決策は非常に複雑で、もっとスマートな解決策があるに違いありません。

ああ、関数で送信されたパラメーターを更新する方法もわかりません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>
4

1 に答える 1

2

onclick属性では、 を呼び出すだけでなく、次のinsertNewRow()ようなことを行います

insertNewRow.apply(this);

属性内のthisキーワードonclickは、クリックされた要素の参照です。を使用しinsertNewRow.apply(this)て呼び出しinsertNewRow()、同時にthisその関数呼び出し内のキーワードをクリックされた要素またはこの場合はボタンに割り当てます (そうしないと、代わりにthis内部がオブジェクトinsertNewRow()への参照になります) Window. 次に、insertNewRow()関数で、クリックされている現在の要素が要素であるかどうかを確認しますtr。そうでない場合は、1 レベル上に移動して、その要素が要素かどうかを確認し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

}​

Jsフィドル

それでもわからない場合は、こちらFunction.apply()のドキュメントを参照してください。

于 2012-10-04T14:06:10.103 に答える