0

ボタンがクリックされた場合、(新しいテーブル行を追加することによって) 新しいチュートリアルを追加する役割を担うこの jQuery スクリプトがあります。次に、テーブルに新しい行が追加され、選択ドロップダウンと、ユーザーが情報を入力するためのテキスト ボックスが表示されます。

    $('#btnAdd').click(function() {
    var num     = $('.clonedInput').length;        
    var newNum  = new Number(num + 1);

    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);        

    newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
    $('#input' + num).after(newElem);        
    $('#btnDel').attr('disabled','');

});

これは HTML マークアップです。

<table class="widefat">
<thead>
<tr>    
<th style="width: 2.5%;"></th>
<th style="width: 2.5%;"></th>                          

<th style="width: 50%;">Subject</th>                            
<th>Delay in days</th>
<th style="width: 15%;">Send e-mail</th>
  </tr>

  </thead>  

  <tbody id="sortableinputs" class="ui-sortable">               
  <tr class="clonedInput" id="input1">

<td width="2.5%">Drag this</td>                        

    <td width="2.5%">Delete this row</td>                                 

<td width="50%">                    

                <select style="width:100%;" name="group_tutorial_posts1">
            <option value="551">This is a tutorial title</option>       
            <option value="552">This is another tutorial title</option>         

        </select>

</td>

<td><input type="text" name="name1">Period</td>
    <td><input type="button" value="Send email" class="button-secondary"></td>
    </tr>
  </tbody>                  


</table>

私の問題は、インクリメントが選択名とテキストボックス名にも一致するようにjQueryスクリプトを修正するにはどうすればよいかということです。

たとえば、ボタンをクリックすると、tri id は入力 2 になります (これについては問題ありません。jQuery スクリプトはこれについて正常に動作しています)。

<tr class="clonedInput" id="input2">

しかし、（これは私の問題です）選択名とテキスト名もインクリメントしたいので、次のようになります。

<select style="width:100%;" name="group_tutorial_posts2">

と：

<input type="text" name="name2">

別のものを追加する場合:

<select style="width:100%;" name="group_tutorial_posts3">
<input type="text" name="name3">

次のインクリメントされた tr の場合:

<tr class="clonedInput" id="input3">

ここに非常に単純化された JS fidde デモを追加しました: http://jsfiddle.net/codex_meridian/dP5xZ/2/

助けてくれてありがとう。

4

1 に答える 1

0

あなたがすでに持っているコードを考えると、次のようなものがあります。

このコードは、新しいtrを追加する場所に配置されます。少し冗長ですが、もっと短く雄弁な方法があると確信しています。ただし、後続の入力フィールドについても同じように実行します。

    var _tr =  $('#sortableinputs tr:last');
        _tr.attr('name','group_tutorial_posts' + _tr.index());
        _tr.find(':first > select').attr('name',_tr.attr('name'));
于 2013-02-25T05:27:40.760 に答える