Question

我有一个前端应用程序，其动态表具有不同的大小，具体取决于REST请求到我的服务器的数据。我正在寻找一种处理这些表格创建的好方法。

首先在html中创建一个表：

<table class="table table-condensed">
     <thead>
         <tr>
            <th>Status</th>
         </tr>
     </thead>
     <tbody id="myid"></tbody>
</table>

然后我使用这个表的主体动态创建我的表的新行，包括css属性，单元格，不同样式的文本等......

在那里我发现使用javascript编写代码很复杂，因为在HTML中创建人机界面显然很容易，它变得难以理解并且难以在javascript中进行测试。

一开始，像这样的人就完成了：

forloop on each rows{
    html += '<table><tr><td colspan="3"><hr></td></tr>';
    html += '<tr id="myid-' + i + '">';
    more and more unreadables lines then finally
    $('#myid').html(html);
}

这显然不是一个好的解决方案，因为它不可读，好的是我可以控制每个css参数，样式和事件。

然后我做了类似的事情：

forloop on each rows{
    var newLine = document.getElementById("myid").insertRow(-1);
    newLine.id = "myid-" + i;
    newLine.setAttribute("style", "width: 10%; text-decoration:none;");
    newLine.onclick = function() {Expand(i);}
    etc...
}

但是也很难找到如何控制css参数等...

然后我做了一个混合解决方案，混合了第一个和第二个。

有没有人有一个很好的做法来处理动态表？我想知道我是否可以创建一个HTML文件，其中包含空格中的id和文本空格，例如填充，当我从带有参数的javascript或任何类似解决方案调用它时

编辑1 我目前正在尝试安装节点包Handlebars，很快就会更新

前端动态表的最佳实践

0 个答案: