使用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比我在这里可以说的要强大得多).

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

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

原文链接：https://www.f2er.com/jquery/530973.html

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

猜你在找的jQuery相关文章