Question

我有下表：

 <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任何帮助表示赞赏。谢谢！

Answer 1

只需对代码进行一些修改，我就可以使其正常工作。克隆后，您可以直接更改节点的ID和名称（.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('');

Answer 2

在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;         
            }
        );

Answer 3

如果您使用IE进行测试，请注意。克隆有时在IE中不起作用。特别是克隆单选按钮

Jquery：克隆行并将索引追加到文本区域名称/ ID

3 个答案: