如何将新行添加到jQuery中的表？

Question

我在我的页面中有一张表格，需要由我从数据库中获得的数据填充。我正在使用jquery在客户端实现这一点。

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

这里是我的jQuery函数：

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

的数据像

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

我的问题类中定义的，怎么我填????部分，以便我可以在表中插入以下行？我可以有多达数百个这样的行。

<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

你可以建立自己的字符串（如：html）通过在循环中将值，然后附加到DOM只有一个操作。

代码（未测试）：

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