Question

I have the following table:

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

And the following JQuery script:

$("#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;       

            }       
        );  

It works just fine; however, as you can see from my HTML, I am trying to attach an index to the name/id of the text area. So, upon adding a new row using the Jquery script, i would like to change the name and id of the newly added row to match my index. So, row one is txtOpenIssues0, and then the newly added row would contain text field txtOpenIssues1, then add another and it’d be txtOpenIssues2, etc. I have done this successfully without JQuery, but am wanting to try more JQuery solutions. Currently have jquery 1.6.1 Any help is appreciated. Thanks!

Answer 1

With just a little modding of the code I was able to get it working. You can directly change the the id and name of the node after cloning it (.clone(true).attr(...)). and then you just use the index you are already iterating.

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('');