1

私はこのようなテーブルを持っています：

<table id="invrows">
    <tbody>
        <tr id="rowrow">
            <td><input type="text" id="idef" name="idef[]" class="required"></td>
            <td><input type="text" id="iprice" name="iprice[]" class="required"></td>
            <td><input type="text" id="ivat" name="ivat[]" class="required"></td>
            <td><div id="addrow">Add One More</div></td>
        </tr>
    </tbody>
</table>

そして、「addrow」divがクリックされるたびに、テーブルに新しい行を追加したいとします。これが私のjQueryコードです：

$('#addrow').click(function(){
        $('#invrows tr:last').append($('#rowrow'));
});

ただし、新しい'#rowrow'行を追加する代わりに（ばかげているように聞こえますが）、この1行を削除するだけなので、空のテーブルが残ります。行のHTMLコードを.append（）に追加しようとしましたが、これは問題なく機能しますが、DOM要素で機能するようにしたいので、元の行が変更されても何も壊れず、jQueryコード自体は壊れません。編集する必要はありません。すべての助けに感謝します！

4

5 に答える 5

2

元の行自体ではなく、行のクローンを追加します。さらに、複製された要素に重複しないように、id値を削除する必要があります。

// Use event-delegation since we'll have many rows
$("#invrows").on("click", ".addrow", function (e) {

  // Clone row
  var clone = $(this).closest("tr").clone();

  // Append to table, clear inputs
  clone.appendTo(e.delegateTarget).find(":input").val('');

  // Remove add button from original row
  $(this).closest("td").remove();

});

フィドル： http： //jsfiddle.net/jonathansampson/4MRx5/

于 2013-01-10T14:53:34.097 に答える
1

本文ではなく、行に追加しています。あなたは次のようなものが欲しいです：

$('#addrow').click(function(){
        $('#invrows tbody').append($('#rowrow').clone());
});

ああ、そして他の人が言ったように、要素のクローンを作成するか、そのHTMLを直接取得します。（これを反映するように編集されたコード）。

また、同じIDの2つの行が作成されることになりますが、これもあまり適切ではありません。:)

もう1つ、 .clone（）のドキュメントを見ると、実際に必要であるように見えます。そうでない場合、jqueryは実際の要素を移動するだけです。そこにある例を参照してください。

于 2013-01-10T14:55:08.403 に答える
0

あなたがしたいことはrowrowのhtmlコンテンツを追加することですので、代わりに試してみてください：

$('#addrow').click(function(){
    $('#invrows tr:last').append($('#rowrow').html());

}）;

于 2013-01-10T14:54:53.267 に答える
0

append（）は使用しないでください。これを使用して、neテーブル行を親行の中に挿入します。目的のためにafter（）を使用する必要があると思います。

$('#addrow').click(function(){
        $('#invrows tr:last').after($('#rowrow').clone());
});
于 2013-01-10T14:57:43.230 に答える
0

追加する新しい行を返す関数を作成します。

function newRow (table) {
    var html = '<tr id="rowrow' + (table.tBodies[0].rows.length + 1) + '">' +
        '<td><input type="text" id="idef" name="idef[]" class="required"></td>' +
        '<td><input type="text" id="iprice" name="iprice[]" class="required"></td>' +
        '<td><input type="text" id="ivat" name="ivat[]" class="required"></td>' +
        '<td><div id="addrow">Add One More</div></td>' +
    '</tr>';
    $(table.tBodies[0]).append(html);
}

ここで使用されています：

var $table = $('#invrows');
$('#addrow').click(function(){
    $table.append(newRow($table[0]));
});

これで、構造を変更する必要がある場合は、newRow関数で変更するだけです。または、テンプレートエンジンを使用することもできます。

すべての入力とaddRowdivでIDの重複の問題がまだ発生していることに注意してください。

于 2013-01-10T15:18:14.630 に答える