0

ユーザーが自由に入力フィールドの行を追加/削除できるコンポーネントのリストを作成したので、ユーザーはデータの行を動的に自由に削除/追加できます:

----| _| || | ____| -ボタンを外す-

----| _| || | ____| -ボタンを外す-

----| _| || | ____| -ボタンを外す-

----| _| || | ____| -ボタンを外す-

----追加ボタン---- 保存ボタン----

ただし、ここで問題が発生します。JSP/sevlet モデルに戻すために、データが html 配列に配置されます。

  <input id="row[0]" .../>
  <input id="row[1]" .../>
  <input id="row[2]" .../>
                ......
  <input id="row[n]" .../>

したがって、特にセクションの途中でユーザーが行を削除すると、基本的なjqueryコマンドを使用して仕事をするだけなので、配列シーケンスは間違いなく台無しになります。

        if (confirm(message_confirm_delete)) {
            j(this).parent().remove();
        }

質問は次のとおりです。ユーザーが配列要素の1つを削除したときに、すべての入力フィールド配列を再配置する最良の方法は何ですか?

4

1 に答える 1

1

私があなたの質問を正しく理解していれば、入力フィールドの ID が途中から 1 つ削除された後、不正確であると言っているのですね。その場合、このようなものは、要素が削除された後に id 属性を更新します。

<div>
    <input id="row[0]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
    <input id="row[1]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
    <input id="row[2]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
    <input id="row[3]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
    <input id="row[4]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
    <input id="row[5]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>      

<script>
    $('button.remove').click(function() {
        $(this).parent('div').remove();

        $('input.removableInput').each(function(index) {
            $(this).attr('id', 'row[' + index + ']');
        });                                 
    });     
</script>
于 2013-03-18T21:17:22.123 に答える