How to add new rows to a table in jquery?

Question

I have a table in my page which needs to be populated by the data I got from database. And I am using jquery to achieve this at the client side.

<table id="tblPrograms">
<tr>
    <td>
    </td>
    <td>
        Name</td>
    <td>
        Value</td>
</tr>

<!--<tr>
    <td>
        1
    </td>
    <td>
        <input id="txt_name1" class="MyClass" type="text" />
    </td>
    <td>
        <input id="txt_value1" class="MyClass" type="text" />
    </td>
</tr>-->
</table>

Here is my jquery function:

this.Init = function()
{
    var myself = this;
    myself.get_Service().GetAllPrograms( //webservice call
        function(data) {
            for(var ctr=0;ctr<data.length;ctr++) {
                $('#tblPrograms tr:last').after('<tr>????</tr>');
            }
        }
    );
}

The data is defined in the class like

public class Programs{
public string Name{get;set;}
public string Value {get;set;}
…
}

My questions, how to I fill ???? part so that I can have following row inserted in the table? I could have as many as hundreds of such rows.

<td>
   %i%
</td>
<td>
    <input id="txt_name%i%" class="MyClass" type="text" />
</td>
<td>
    <input id="txt_value%i%" class="MyClass" type="text" />
</td>

Answer 1

You can build your own string (eg. html) by concatenating the values in your loop, then append to the DOM with only one operation.

Code (not tested):

this.Init = function()
{
    var myself = this;
    myself.get_Service().GetAllPrograms( //webservice call
        function(data) {
            var html = '';
            for(var ctr=0;ctr<data.length;ctr++) {
                html += '<tr><td>'+ ctr +'</td><td><input id="'+data[ctr].Name+'" class="MyClass" type="text" />'+'</td><td><input id="'+data[ctr].Value+'" class="MyClass" type="text" /></td></tr>';
            }
            $('#tblPrograms tr:last').after(html);
        }
    );
}