0

あなたの助けが必要です。私の問題は、動的フォームを作成していることです。私のフォームにはボタンがあり、その下にテーブルがあります。

シナリオは次のとおりです。 1. ユーザーがボタンをクリックします。 2. ボタンをクリックすると、表の行が動的に追加されます。私の行の中にはテキストボックスがあります

私はそれを行うことができますが、ユーザーがボタンをクリックした後にどのようにプロセスを行うことができますか? 行はテキストボックスと一緒に追加されます。しかし、テキストボックスに一意の ID を割り当てたいです。私の場合、このインクリメンタルを実行したいと考えています。

これが私のjsです：

$(document).ready(function(){
    $("[data-item]").on('click',function(){
       $("#grid1 tbody").append("<tr><td><input type='text' value='123' style='width:100px' id='' /></td></tr>");
    });
});

ここに私のテーブルがあります：

<input type="button" name="add" data-item="123" value="ADD" class="test" id="test" />
<table id="grid1" border="1" style="width: 40%">
    <thead>
       <tr>
         <th style="text-align: center;">CODE</th>
       </tr>
    </thead>               
    <tbody>
    </tbody>
</table>

これがフィドルです： http://jsfiddle.net/rochellecanale/xvdMz/

4

2 に答える 2

2

カウンターを保つ

$(document).ready(function(){
    var counter = 0;
    $("[data-item]").on('click',function(){
       $("#grid1 tbody").append("<tr><td><input type='text' value='123' style='width:100px' id='in-" + counter++ + "' /></td></tr>");
    });
});

デモ:フィドル

于 2013-10-10T00:54:57.190 に答える
1

次の方法で実行できます。

新しい行を作成すると、現在の入力の長さを確認し、それを id の一部として追加できます。

   $("[data-item]").on('click',function(){
       var $el = $("<tr><td><input type='text' id='myInput" + ($('#grid1').find('input').length +1) + "' value='123' style='width:100px' id='' /></td></tr>");

       $("#grid1 tbody").append($el);
    });

デモ

アイテムを複製したままにしておく代わりに、テンプレートを作成することができます。少なくとも、このように html 自体に入れることができます。

<script type="text/html" id="clone">
    <tr><td><input type='text' value='123' style='width:100px' id='' /></td></tr>
</script>

次に、それを使用してクローンを作成します。このようにして、html をある場所に保持し、スクリプトを別の場所に保持します。

  $("[data-item]").on('click',function(){
        var $el =$($.parseHTML($('#clone').html())).find('input').prop('id', "myInput" + ($('#grid1').find('input').length +1) ).end();
       $("#grid1 tbody").append($el);
    });

デモ

于 2013-10-10T00:57:22.793 に答える