2

ページに、ユーザーが行を追加/削除できる動的テーブルがあります。ユーザーが 6 人を追加するとします。名の配列は次のようになります。

Index:    0   1   2   3   4   5
Person#:  1   2   3   4   5   6

次に、ユーザーが最初の 3 行を削除したとします。最初の名前の配列は次のようになります。

Index:    0   1   2   3   4   5
Person#:              4   5   6

最後に、ユーザーがさらに 3 人を追加すると、配列は次のようになります。

Index:    0   1   2   3   4   5
Person#:              7   8   9

そして、これが私が抱えている問題です。行を削除するとき、次のように見える代わりに、jquery 配列を適切にシフトするにはどうすればよいですか。

Index:    0   1   2   3   4   5
Person#:              4   5   6

次のようになります。

Index:    0   1   2   3   4   5
Person#:  4   5   6

これが私のコードの実例です: demo
問題を修正するためにコードに追加/変更する必要があるのは何ですか?

4

3 に答える 3

2

通常、属性値の番号を付け直すだけです。このようなもの：

$("#table").find('tr').each(function(index, element)
{
    var row = $(this);

    index --;

    var names = ['fname_new', 'lname_new', 'phone_new', 'email_new', 'ethnicity_new'];
    for(var i in names)
    {
        row.find('input[name^="' + names[i] + '"]').attr('name', '' + names[i] + '[' + index + ']');
    }
});

http://jsbin.com/icutuj/3/edit

于 2012-10-01T22:12:55.647 に答える
1

インデックスを修正しようとするのではなく、隠し変数を作成し、それを Index と呼びましょう。新しい行が追加されるたびに、Index++ になります。

次に、データがポストバックされると、次のような簡単な疑似コードを作成できます。

for (int i = 0; i++ i<$index) {
   var person = $POST[person_$index];
   if (person != null) {
     //do something
   }
}

このようにして、削除されたレコードの数は気にしません。

乾杯！

于 2012-10-01T21:49:55.707 に答える
1

最善の解決策ではないかもしれませんが、行の値を空白にしてから、delete() を hide() に変更することでこれを回避しました。行数を維持していません。より良い解決策があることを願っています。

    $('div#editPhoneDlg').delegate('a.remove[href^=#]', 'click', function () {

        var row = $(this).parent().parent();
        if (rowCount > 1) {
            var name = $(row).find('td.name input');
            name.val('');
            var address = $(row).find('td.address input');
            address.val('');
            var phone = $(row).find('td.phone input');
            phone.val('');
            row.hide();
        }
        else {
            var name = $(row).find('td.name input');
            name.val('');
            var address = $(row).find('td.address input');
            address.val('');
            var phone = $(row).find('td.phone input');
            phone.val('');
        }
        return false;
    });
于 2012-10-01T21:52:28.827 に答える