Question

如果单击一个按钮，我有这个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脚本，使得增量与我的选择名称和文本框名称相匹配。

例如，如果我单击按钮，则会输入tr 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/

感谢您的帮助。

Answer 1

鉴于您已经拥有的代码，可以采用以下方式：

此代码将放在您添加新tr的位置。有点冗长，我确信有更短的更有说服力的方式。但是您只需对后续输入字段执行相同的操作。

    var _tr =  $('#sortableinputs tr:last');
        _tr.attr('name','group_tutorial_posts' + _tr.index());
        _tr.find(':first > select').attr('name',_tr.attr('name'));

使用jQuery增加元素名称

1 个答案: