2

ユーザーが動的に行を追加できるhtmlテーブルがあります。
jqueryで自動行インクリメントを実装しようとしました。

インデックス 1 から開始できませんでした.
2 行目を追加した後、順番に追加を開始します. 順番に
削除している間は問題ありませんが、途中から削除すると番号の順序は変わりません.

このコードを使用して増やしています 

var i=1;

$('.form_id').each(function(){
    $(this).text(i);
    i++;
});

ここでライブの例を見ることができます
.jsfiddle.netはより説明的です.

インデックス1から自動的に開始する必要があります

ありがとう

4

1 に答える 1

2

あなたの問題は、クラスの命名です。この作業フィドルを参照してくださいhttp://jsfiddle.net/ZFWU7/5/

td と入力の両方に名前を付ける.form_idことで、それらすべてを反復処理します。

 $('td.form_id').each(function(i){
        $(this).text(i+1);
    });

セレクターをより具体的にする

あなたのコメントによると、私はあなたの「順序付け」機能を、その動作を2つのアノノミー機能の一部にするのではなく、明示的に定義された独自の機能に分離します。あなたはDRYルールをうまく守っていません。以下の（フィドルから）よりクリーンで保守しやすい方法でコードを書き直しました。これは少しだけ良くなります。グローバル名前空間で関数を宣言することは、あまり良い方法ではありません。「コントローラー」のグループに名前を付ける方がよいでしょう。 http://addyosmani.com/blog/essential-js-namespacing/ 

$(document).ready(function() {
    $("#add-line").click(addRow);
});

function updateRowOrder(){
 $('td.form_id').each(function(i){
        $(this).text(i+1);
            });
}

function addRow(){
    var template = $('#template'),
    id = 0;

    if(!template.is(':visible'))
    {
        template.show();
        return;
    }
    var row = template.clone();
    template.find("input:text").val("");
    row.attr('id', 'row_' + (++id));
    template.before(row);
    var i=1;
    updateRowOrder(); 
    $('.form-fields').on('click', '.remove', removeRow);

}

function removeRow(){
    var row = $(this).closest('tr');
    if(row.attr('id') == 'template')
    {
        row.hide();
    }
    else
    {
        row.remove();
    }
    updateRowOrder(); 
}
于 2013-07-16T23:17:36.833 に答える