Javascript 使用javascript动态更新表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14949210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically update a table using javascript
提问by Alan Coromano
I have a page where I send an ajax request to a server. There is a table on the page which displays some data. The server returns a json object which is a list of objects and it doesn't contain any layout for the page.
我有一个页面，我向服务器发送 ajax 请求。页面上有一个表格，显示了一些数据。服务器返回一个 json 对象，它是一个对象列表，它不包含页面的任何布局。
I want to update only table rowsby returned json. How can I do this without using third-party libraries and only using jquery? I just want a rough idea and example.
我只想通过返回的 json更新表行。如何在不使用第三方库且仅使用 jquery 的情况下执行此操作？我只想要一个粗略的想法和例子。
回答by Onur Y?ld?r?m
Here is the demo fiddle. (simple version)
NEW:See the updated fiddle(advanced version).
Let's say you have this JSON data retrieved:
假设您已检索到此 JSON 数据：
var jsonData = [
{ field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' },
{ field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' },
{ field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' }
];
And you have this table:
你有这张表：
<table id="data-table">
<tr><td>There are no items...</td></tr>
</table>
Now, you need a method that can parse the values in a customisable order and presence. For example, if you can pass a field array to the parser function; you can set the order of the fields and leave out a field or two if you want to:
现在，您需要一种可以按照可自定义的顺序和状态解析值的方法。例如，如果您可以将字段数组传递给解析器函数；如果您想，您可以设置字段的顺序并省略一两个字段：
loadTable('data-table', ['field1', 'field2', 'field3'], jsonData);
Notice that field4is not parsed.
请注意，field4未解析。
The loadTablefunction loops through the items of the returned array and create a <tr>with each field value inside a <td>. Here is the simple function:
该loadTable函数循环遍历返回数组的项，并使用 a<tr>中的每个字段值创建a <td>。这是简单的函数：
function loadTable(tableId, fields, data) {
//$('#' + tableId).empty(); //not really necessary
var rows = '';
$.each(data, function(index, item) {
var row = '<tr>';
$.each(fields, function(index, field) {
row += '<td>' + item[field+''] + '</td>';
});
rows += row + '<tr>';
});
$('#' + tableId).html(rows);
}
UPDATE:
更新：
Added support for:
添加了对以下内容的支持：
- Table headers
- Default text (for empty list)
- Appending lists
- Clearing the table
- etc...
- 表头
- 默认文本（用于空列表）
- 附加列表
- 清理桌子
- 等等...
You can now simply include an empty table and the dynamicTablewill take care of the rest:
您现在可以简单地包含一个空表，dynamicTable其余的将处理：
<table id="data-table"></table>
Call the dynamicTable.config()method to configure the table:
调用dynamicTable.config()方法配置表：
var dt = dynamicTable.config('data-table', //id of the table
['field2', 'field1', 'field3'], //field names
['header 1', 'header 2', 'header 3'], //set to null for field names to be used as header names instead of custom headers
'There are no items to list...'); //default text for no items
Then call dt.load(data);to load new data (removes the previous list if there is one),
OR call dt.load(data, true);to append the new data at the end of the previous list.
然后调用dt.load(data);加载新数据（如果有，则删除上一个列表），
或调用dt.load(data, true);将新数据附加到上一个列表的末尾。
Calling dt.clear();method will clear the whole list.
调用dt.clear();方法将清除整个列表。
回答by Prasad Rajapaksha
You can iterate through your JSON objects.
您可以遍历您的 JSON 对象。
$.each(JSON_Object, function(key, value) {
// Write your code here
});
Then you can simply append your table with data.
然后您可以简单地将数据附加到您的表中。
$('#yourTableName tr:last').after('<tr><td>John</td><td>0</td></tr>');
Since you specifically mentioned that you don't need 3rd party libraries, you can do something like above. However if you need dataset with all the features, you can consider some plugin like http://datatables.net/.
由于您特别提到您不需要第 3 方库，因此您可以执行上述操作。但是，如果您需要具有所有功能的数据集，您可以考虑使用一些插件，如http://datatables.net/。
回答by Paul T
If the table in question is associated to an oData service (e.g. as is standard in Fiori) with an item reference in the table XML such as items="{/ReportSet}"then a request to update the table with a filter will automatically update the table items i.e. in JS:
如果有问题的表与 oData 服务相关联（例如，在 Fiori 中是标准的），并在表 XML 中使用项目引用，例如，items="{/ReportSet}"使用过滤器更新表的请求将自动更新表项目，即在 JS 中：
eTable.bindItems(sPathR,template,null,this.instanceFilter);
- sPathR is the entity set e.g.
/ReportSetin the above templateshould be the item template in the tablethis.instanceFilteris the defined filter set prior to the call
- sPathR 是实体集，例如
/ReportSet在上面 template应该是表中的项目模板this.instanceFilter是调用之前定义的过滤器集
