0

クローンを使用してJQueryでテーブルに行を動的に挿入しています。

$('#Clone').click(function() {

    //put jquery this context into a var
    var $btn = $(this).parent();

    //use .closest() to navigate from the buttno to the closest row and clone it
    //use clone(true) to pass events to cloned item

    var $clonedRow = $btn.closest('tr').clone(true).insertAfter($btn);  

});

エンド ユーザーは、新しい行の挿入を制御します。新しい行の数を 5 に制限する必要があります。Cookie またはその他の方法 (配列) を使用してこれを行う方法はありますか。独自の一意の ID を持つ複数のテーブルを持つことができるため、ページ上の複数のテーブルを操作する必要があります。

お役に立てれば幸いです。

4

5 に答える 5

1

変数はどうですか？

function addClick(identifier, max){
  var i = 0;
  $(identifier).click(function() {
    if (i < max){
       //add row
       i++;
    } 
  }
}
addClick("#Clone", 5);

または、ユーザーが追加したクラスに別のクラスを設定し、add 関数内でそれらをカウントすることもできます。

于 2010-02-02T21:20:40.237 に答える
0

テーブルのデータ属性を使用することもできます 

   var i = $('#tableID').data('userAddedRows');//of course you need to check there is a value and such
   i++;
   $('#tableID').data('userAddedRows',i);

次に、iが許可された量よりも少ないことを確認します

于 2010-02-02T21:28:38.673 に答える
0

ご協力いただきありがとうございますが、そのトリックを行う JQuery プラグインを見つけました。ここです...

http://cloudgen.w0ng.hk/jquery/table.addrow.php

于 2010-02-03T18:54:36.110 に答える
0

返された要素の数を数えることができます。

function countRows() {
  return $("#table-id tr").length + $("#table2-id tr").length; // etc, for all table ID's.
}

または、ユーザーが追加した行に特別なクラスを追加することもできます。

function countRows() {
  return $("tr.new").length;
}
于 2010-02-02T21:15:53.713 に答える
0

各テーブルに変数を使用して、追加された行数を追跡することができます。

または、別の方法として、dom 要素にデータを直接格納できる jQuery の data() メソッドを使用することもできます。クリック イベントはそのテーブルを見つけ、行が追加されるたびにテーブルの data() を更新し、最大数に達するとそれ以上の追加を防ぎます。

編集: theCount が未定義かどうかを確認し、誤って配置された括弧を削除するためのチェックを含むコードを修正しました。

$('#Clone').click(function() {
    var $btn = $(this).parent();
    if($btn.closest('table').data('theCount') == undefined) {
        $btn.closest('table').data('theCount', 0)
    }
    var currentCount = $btn.closest('table').data('theCount');

    if(currentCount < 5) {
        $btn.closest('tr').clone(true).insertAfter($btn);
        $btn.closest('table').data('theCount', currentCount + 1);
    }
});

http://api.jquery.com/data/

于 2010-02-02T21:24:38.807 に答える