gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 01:20:37 25 4
gpt4 key购买 nike

我对 JSON/jQuery 还很陌生。

我需要一些关于如何在客户端动态填充 Html 表的快速指导。我的表有固定的列,但行根据检索的数据动态增长。

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

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

请给我示例代码

编辑

我在这篇文章 here 上有解决方案谢谢大家

最佳答案

这是jQote 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 比我在这里告诉你的要强大得多)。

希望您喜欢,尝试一下。

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

关于jquery - 使用 jQuery 对复杂对象使用 JSON 动态更新 html 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2213216/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com