Question

我目前有一个网页，其中有几行标记为“东西”的对象。截至目前，我在html中将它们硬编码为“Fan Speed，Temperature，Light等”，如图所示：http://i.imgur.com/ocRUlaD.png

我希望通过将这些条目存储在数据库中（当前使用postgres）使这些条目动态化，并直接从数据库中填充此框。这样，用户可以添加或删除“东西”并不断更新，类似于购物车。

现在为了这个工作，我有点困惑的是如何制作它以便我可以为每个条目动态添加HTML。最终，每一行条目都应该有自己的形式，因此每行的HTML代码非常相似，但每个表单都需要有唯一的链接。

我目前已经能够以JSON格式从数据库中检索所有条目。添加这些动态div / html块以为每个“事物”创建新行的最佳方法是什么？

以下是我对负责“Light 1”的div的一些示例html代码。其他行将非常相似，但具有适当的表单操作和id。

<div class="large-event" id="space-font">
              <!-- Collapsable Button -->
              <a data-toggle="collapse" data-target="#light1" href="#">
                Light 1
                <img src="onBulb.png" id="bulbPic1" width="25" height="40" alt="">
              </a>

              <!-- LIGHT 1 Collapse Material -->
              <div id="light1" class="collapse out">
                <div class="shift-right">
                  <form method="post" style="display:inline" action="/testlamp">
                    <input type="hidden" name="node_address" value="1">
                    <input type="radio" id="lampOn1" name="data_value" value="on" checked> On
                    <input type="radio" id="lampOff1" name="data_value" value="off"> Off
                    <input type="button" id="lampButton1" inline class="btn" onclick="lampStatusChange(this.id)" value="Submit">
                  </form>
                </div>
              </div>
</div>

Answer 1

使用javascript模板并将其填入数据库信息？

http://underscorejs.org/#template

或者，如果您想在服务器端进行模板化，可以执行以下操作：

JSP tricks to make templating easier?

用JSP动态添加新的div / html？

1 个答案: