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 脚本，以使增量也与我的选择名称和文本框名称匹配。

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

感谢您的任何帮助。

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 回答