使用javascript动态更新表

我有一个向服务器发送ajax请求的页面。页面上有一个表格，其中显示了一些数据。服务器返回一个json对象，它是一个对象列表，不包含页面的任何布局

---

我只想通过返回的json更新表行。如何在不使用第三方库而仅使用jquery的情况下做到这一点？我只想要一个粗略的想法和示例。

您可以迭代JSON对象

$.each(JSON_Object, function(key, value) {
    // Write your code here
});

然后，您可以简单地将数据附加到表中

$('#yourTableName tr:last').after('<tr><td>John</td><td>$500</td></tr>');

$（'yourTableName tr:last'）。在（'John$500'）之后；

因为您特别提到您不需要第三方库，所以您可以执行上面的操作。但是，如果您需要具有所有特性的DataSet，您可以考虑一些插件。p> 这是你的答案。（简单版）
新建：请参阅（高级版本）

假设您已检索到此JSON数据：

var jsonData=[
{field1:'值a1'，field2:'值a2'，field3:'值a3'，field4:'值a4'}，
{field1:'值b1'，field2:'值b2'，field3:'值b3'，field4:'值b4'}，
{field1:'值c1'，field2:'值c2'，field3:'值c3'，field4:'值c4'}
];

你有这张桌子：

没有项目。。。

现在，您需要一个方法，该方法可以按可定制的顺序和状态解析值。例如，如果可以将字段数组传递给解析器函数；如果要执行以下操作，可以设置字段的顺序并省略一个或两个字段：

loadTable('data-table', ['field1', 'field2', 'field3'], jsonData);

请注意，

field4

未被解析

loadTable

函数循环遍历返回数组的项，并使用

中的每个字段值创建一个

。以下是简单的函数：

函数加载表（表ID、字段、数据）{
//$（'#'+tableId）.empty（）；//实际上不需要
var行=“”；
$。每个（数据、功能（索引、项目）{
var行=“”；
$.each（字段、函数（索引、字段）{
行+=''+项[字段+'']+''；
});
行+=行+“”；
});
$（'#'+tableId）.html（行）；
}

更新： 增加了对以下内容的支持：

• 表格标题
• 默认文本（用于空列表）
• 附加列表
• 清理桌子
• 等等

现在，您只需包含一个空表，

dynamicTable

将处理剩下的部分：

<table id="data-table"></table>

然后调用

dt.load（数据）

加载新数据（如果有，则删除以前的列表），
或者调用

dt.load（数据，true）

将新数据追加到上一个列表的末尾

调用

dt.clear（）方法将清除整个列表

 如果所讨论的表与oData服务（如Fiori中的标准）关联，且表XML中有项引用，如
items=“{/ReportSet}”
，则使用过滤器更新表的请求将自动更新表项，即在JS中：

eTable.bindItems(sPathR,template,null,this.instanceFilter);


sPathR是实体集，如上文中的
/ReportSet
模板
应为表中的项目模板
此.instanceFilter
是调用之前定义的筛选器集
“…不使用第三方库，只使用jquery”呃。。。这将是一个棘手的问题。可以通过本机JavaScript实现——您可以提供一个JSON数据格式的示例吗？…但要回答这个问题，您可以选择一行，并用接收到的数据更新其单元格。这是你的粗略回答。现在试一试，如果你在某个特定的问题上遇到困难，问问这个问题。@nathan，比方说，它是：
好的：价格、重量、长度、颜色。
。@这个系统非常粗糙。你介意给我举个例子吗？如果我不想追加（我也需要追加），但要用新行替换当前行，我该怎么做？如果你想显示所有新行。首先清空桌子。然后显示新行。如果
数据表
已经有标题，如何在不丢失标题的情况下为其添加/重新呈现行<代码>$（'#'+tableId）.html（行）

重新写入整个表，包括其标题。为此，您可以在表中使用

和

标记，并相应地修改jQuery选择器。e、 g.：

$（'#'+tableId+'tbody'）.html（行）查看更新答案中的高级版本。知道为什么此代码输出的“字段”值顺序不正确吗？这是输出。。。“值a2值a1值a3”。@Ryan_S由于表的初始化顺序：
['field2'，'field1'，'field3']，//字段名
我相信这样做是为了向您表明顺序很重要。设法找到了问题-的结束标记没有“/”。js的第19行显示：行+=''；它应为行+=''；