javascript - 从数据构建类似表格的结构

Question

有没有办法从网站上的数据集（在 javascript 中）动态构建类似表格的结构？

在伪代码中类似于：

 function pseudo(dataset) {
    <table>
    <th>dataset.name, dataset.id</th>
    foreach dataset.schedular.array as a {
     <tr><td>a.start_time</td><td>a.end_time</td><td>a.client.name</td></tr>
    }
    </table>
 }

并执行如下：

 <div>
 <script>pseudo(json[employee[0]]);</script>
 </div>

在 php 中，我使用 smarty-templates 将数据“填充”到类似的掩码中，现在我需要在 javascript 中使用类似的东西。是我正在寻找的 jquery 小部件或插件吗？我在哪里可以找到有用的教程或书籍？

Answer 1

你的html页面：

<div id="dataToDisplay"></div>    

你的java脚本函数：

function pseudo(dataset) {
var tableContents = "<table>";
tableContents = tableContents+ "<th>"+dataset.name, dataset.id+"</th>";

foreach dataset.schedular.array as a {
 tableContents  =tableContents + "<tr><td>"+a.start_time+"</td><td>"+a.end_time+"</td><td>"+a.client.name+"</td></tr>";
}
tableContents = tableContents + "</table>";
document.getElementById("dataToDisplay").innerHTML = tableContents;
 }

Answer 2

看看“jqGrid”

http://www.trirand.com/blog/

它是一个插件，可以从中获取 JSON 并生成表格。但是它使用 jQuery。

Answer 3

我使用 jQuery 和以下构造。employees是一个 JS 对象数组。HTML 表是这样准备的：

<table id="clients">
<thead><tr><th>Start</th><th>End</th><th>Name</th></tr></thead>
<tbody></tbody>
</table>

然后使用each的以下 jQuery 循环用于附加行：

$.each(employees, function(index, employee){
    $('#clients > tbody').append(listItem(index, employee)); 
});

wherelistItem()是一个返回表格行的函数。当然，这可以更优雅地完成：

function listItem(index, employee) {
    var item =  '<tr>';
    item += '<td>' + employee.start_time + '</td>';
    item += '<td>' + employee.end_time + '</td>';
    item += '<td>' + employee.name + '</td>';
    item += '</tr>';
    return item;
}