使用jQuery对复杂对象使用JSON动态更新html表

我还是JSON / jQuery的新手.

我需要一些有关如何在客户端上动态填充HTML表的快速指南.我的表具有固定的列,但是行根据获取的数据动态增长.

假设我正在返回的服务器(GetActiveUsers)上有一个Web方法,例如n个用户.
我正在使用此sql:

select userId,Title,Surname,FirstName from Users where status=1

请给我示例代码

编辑

我在here上对此有解决方案
多谢你们

最佳答案
这是jQote THE jQuery javascript模板引擎的完美应用.
您可以从这里获取:http://aefxx.com/jquery-plugin/jqote.

例如,考虑以下内容:

// Example of your json data ... an array of user objects
[{"Title": "Dr.","Surname": "House","Firstname": "Geronimo"},{"Title": "Mr.","Surname": "Franklin","Firstname": "Benjamin"}]

现在,这是您将在HTML(或具有的任何输出文件)中定义的模板:

<script type="text/html" id="template">
    <![CDATA[
        <tr>
            <td class="no"><%= j+1 %></td>
            <td class="title"><%= this.Title %></td>
            <td class="user"><%= this.Firstname + " " + this.Surname %></td>
        </tr>
    ]]>
</script>

因此,我们快完成了.让我们定义包含表并在json数据上调用jQote
神奇地填满桌子.

... your markup ...

<table id="users"></table>

... more markup ...

<script type="text/javascript">
    var jsondata = xxx // get your data somehow

    // Now call jQote on the template providing your json data
    $('#template').jqote(jsondata).appendTo($('#users'));
</script>

仅此而已(嗯,这仅仅是个开始,jQote比我在这里可以说的要强大得多).

希望您喜欢它,尝试一下.

顺便说一句:将用作模板容器是完全合法的标记.而且浏览器在任何情况下都不会显示它.

相关文章

1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...