jQuery的：克隆行和追加索引文本區域名稱/ ID

我有如下表：jQuery的：克隆行和追加索引文本區域名稱/ ID

<table width="1000" border="1" cellpadding="2" cellspacing="2" bordercolor="#CCCCCC" class="WebApps" id="addIssue">  
     <tbody> 
      <tr> 
       <td bordercolor="#f0f0e4" bgcolor="#f0f0e4"><h3>Open Issues 
       <input type="button" class="button" value="+" id="addNewIssue" name="addNewIssue"/> 
       <input type="text" id="txtIndex" name="txtIndex" value="<%=vIndex%>"> 
       </h3></td> 
      </tr> 
      <tr> 
       <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><p><textarea id="txtOpenIssues0" name="txtOpenIssues0" cols="100" rows="2"></textarea> 
       </p></td> 
      </tr>  
     </tbody>     
     </table>

而下面的jQuery腳本：

$("#addNewIssue").click 
     (
      function() 
      {  

       var iX = document.getElementById("txtIndex").value; 
       iX ++; 
       document.getElementById("txtIndex").value = iX;  

       $('#addIssue tbody>tr:last').clone(true).insertAfter('#addIssue tbody>tr:last'); 

       //Clear out newly added text field. 
       $('#addIssue tbody>tr:last #txtOpenIssues0').val('');  
       return false;  

      }  
     );

它工作得很好;然而，正如你可以從我的HTML看到的，我試圖附加一個索引到文本區域的名稱/ ID。因此，在使用Jquery腳本添加新行時，我想更改新添加的行的名稱和ID以匹配我的索引。因此，第一行是txtOpenIssues0，然後新添加的行將包含文本字段txtOpenIssues1，然後添加另一個，它會是txtOpenIssues2等。我沒有JQuery成功完成此操作，但我想嘗試更多的JQuery解決方案。目前有jQuery 1.6.1任何幫助表示讚賞。謝謝！

來源

2011-09-01 SeanFlynn

隨着代碼，我能得到它的工作只是一個小改裝。克隆之後，您可以直接更改節點的標識和名稱（.clone(true).attr(...)）。然後你只用你已經迭代的索引。

http://jsfiddle.net/FKuWJ/1/

$('#addIssue tbody>tr:last') 
    .clone(true) 
    .insertAfter('#addIssue tbody>tr:last') 
    .find("textarea") 
    .attr("id","txtOpenIssues" + iX) 
    .attr("name","txtOpenIssues" + iX) 
    .val('');

來源

2011-09-01 18:16:24

完美的作品！謝謝！ – SeanFlynn

不客氣:)高興地幫忙。 –

在jQuery中有after方法插入元件之後任何東西。試試這個

 $("#addNewIssue").click 
     (
      function() 
      { 
       $('#addIssue tbody>tr:last') 
       .after($('#addIssue tbody>tr:last').clone(true)); 

       var $lastRow = $('#addIssue tbody>tr:last'); 
       var lastRowIndex = $lastRow.index(); 
       //Clear out newly added text field. 


       $lastRow.find('#txtOpenIssues').val('') 
       .attr("id", "txtOpenIssues"+lastRowIndex) 
       .attr("name", "txtOpenIssues"+lastRowIndex);   

       return false;   
      } 
     );

來源

2011-09-01 18:06:57 ShankarSangoli

如果你正在使用IE進行測試，請記住它。克隆有時在IE中不起作用。尤其是克隆單選按鈕

來源

2011-09-01 18:12:08 rajsjha

jQuery的：克隆行和追加索引文本區域名稱/ ID

回答

相關問題