1

jQueryを使用してダイナミックHTMLテーブルの作成に取り組んでいます。テーブルでは、ユーザーには2つのインタラクションがあります。

  1. 行を追加する
  2. 特定の行を削除する

行の番号付けの問題は、ユーザーが特定の行を削除した場合、その行に続くすべての行の番号を付け直す必要があることです。削除された行に続くすべての行を選択し、それらの数を1で引く必要があります。

これについてもっと良い方法はありますか？

編集：これが問題を示すJSFiddleです：http：//jsfiddle.net/LNXae/2/

順序付きリストによって行の番号が自動的に付け直されることは承知していますが、ここで示している例はかなり要約されているため、テーブルを使用したいと思います。

4

3 に答える 3

3

http://jsfiddle.net/mblase75/LNXae/1/

<span>まず、後で簡単に見つけられるように、カウンター番号をクラスでラップします。

$new_row.children('td').prepend('Row #<span class="num">' + ($new_row.index() + 1) + "</span>");

次に、目的の行を削除した後、これらすべてのスパンを.eachループで更新します。のコールバック関数に渡される最初の引数.eachはゼロベースのインデックス番号であり、2番目はHTML要素です。

    var $row = $(this).closest('tr'),
        $table = $row.closest('table');
    $row.remove();

    $table.find('tr').each(function(i, v) {
        $(v).find('span.num').text(i + 1);
    });
于 2012-07-26T16:21:49.687 に答える
1

ユーザーが行を追加または削除した後は、「数値」セルを繰り返す必要があります。あなたが<td>要素を持っていると仮定すると、私たちは：

1）それらに素敵なIDを与えます、例えばrow_0、row_1など...

2）それらを反復処理する関数を記述します。

function updateRows(){
    $('[id*="row_"]').each(function(index){
        $(this).html(index + 1); // add +1 to prevent 0 index.
    };
};
于 2012-07-26T16:02:40.980 に答える
-2

私はまさにこれを行うjqueryプラグインを作成しましたが、行自体に「番号を付ける」必要はありません。行を削除するときに行う必要があるのは、削除する行のインデックスを渡すことだけです。

たとえば、削除ボタンが連続している場合：

<table>
 <tr>
    <td> <input type="button" class="delete" value="delete this row" /></td>
 </tr>
</table>

jQueryは次のようになります

$('.delete').click(function(){
 var index = $(this).parents('tr').index();
 // tell your plugin to delete row "index"
});

これを行う私のプラグインのメソッドは次のようになります。

removeRow: function (index) {
        return this.each(function () {
            var $this = $(this);
            var $tbody = $('tbody', $this);
            var $tr = $('tr', $tbody).eq(index);
            $this.trigger('rowRemoved', [$tr]);
            $tr.remove();
        });
    }
于 2012-07-26T16:09:24.383 に答える