0

私はあらゆる種類のStackOverflowとGoogleの回答を見てきましたが、これを理解することはできませんでした。

私がやろうとしているのは、私のページにある多くのテーブルの1つに行を追加することです。現在、すべての「行の追加」リクエストは最初のテーブルに追加されます。

これが私のJavascriptです：

$(document).ready(function() {
$("a#add_row").click(function () {
$('#ListTable1').height($('#collapse1').height() + 60)
    $("#delTable").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append('<input type="text" name="name[]" size="5"class="input input-small" />'))
                .append($('</td>')
                )
                .append($('<td>')
                .append('<input type="text" name="endpoint[]" size="5" class="input input-small" />'))
                .append($('</td>')
                )
                .append($('<td style="width: 20px">')
                .append()
                .append($('</td>')
                ))
            .append($('</tr>'))
        );
    });
});

そして、これが私が各テーブルを始める方法です：

<table class="table" id="listTable1" style="width: 280px;">
<thead>...the head...</thead>
<tbody>...all sorts of rows. Added row goes at the end of the tbody...</tbody>
<tfoot>
   <tr>
      <td><a id="add_row">Add Row</a></td><td></td>
   </tr>
</tfoot>
</table>

そして、これが私が使用しているボタンです：

<a id="add_row">Add Row</a>

各テーブルのIDをインクリメントする必要があることはわかっていidますが、リクエストを実行したテーブルに行を追加するだけのJavascriptをどうすればよいかわかりません。

どうすればこれを機能させることができますか？

4

2 に答える 2

1

最も近いものを使用して、関連するテーブルを取得できます。

$("#add_row").click(function () {
    var $theTable = $(this).closest("table");

    // do your thing
});

あなたがほのめかしたように、id各ボタンのはユニークでなければなりません。代わりにクラスを使用して、セレクターを作成することをお勧めします.add_row。

于 2012-08-10T23:29:34.673 に答える
1

テーブルとボタンをdiv内に配置してから、parent（）;を使用します。

Javascript

$(document).ready(function() {

    $("a#add_row").click(function () {

    var table = $(this).parent().find('table');


    table.height($('#collapse1').height() + 60)

    $("#delTable").find('tbody').append($('<tr>')
    .append($('<td>')
    .append('<input type="text" name="name[]" size="5"class="input input-small" />'))
            .append($('</td>')
            )
            .append($('<td>')
            .append('<input type="text" name="endpoint[]" size="5" class="input input-small" />'))
            .append($('</td>')
            )
            .append($('<td style="width: 20px">')
            .append()
            .append($('</td>')
            ))
        .append($('</tr>'))
    );
});
});

HTML

<div id="container">

    <table class="table" id="listTable1" style="width: 280px;">...</table>
    <a id="add_row">Add Row</a>

</div>
于 2012-08-10T23:32:20.540 に答える