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

如何在jquery中向表中添加新行？

1 个答案: