使用jQuery增加元素名稱

我有這個jQuery腳本負責添加新的教程（通過添加一個新的表格行）如果點擊一個按鈕。一個新行隨後將與選擇下拉菜單和用戶文本框的表添加到輸入的信息：使用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">

如果再添：爲增加TR

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

：

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

我添加了一個非常簡單的JS fidde演示在這裏：http://jsfiddle.net/codex_meridian/dP5xZ/2/

感謝您的任何幫助。

來源

2013-02-25 Emerson Maningo

鑑於你已經擁有的代碼，沿着線的東西：

該代碼會去當你添加一個新潮流。有一點冗長，我確信有更短的更有說服力的方法。但是你只需按照相同的順序輸入字段。

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

來源

2013-02-25 05:27:40

使用jQuery增加元素名稱

回答

相關問題