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>

你的javascript函数：

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和biulds表的插件。但它使用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)); 
});

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

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;
}

从数据构建表格式结构

3 个答案: