Javascript 动态更新html表

我的网页包含一个下拉列表和一个表。当用户在下拉列表中进行选择时，将使用数据动态填充表格。 我想知道填充此表的最佳方式是什么。 我将SpringMVC和JSP用于我的服务器端技术。在用户做出下拉选择后，我们很可能会发出一个单独的请求来检索数据，而不是一开始就检索所有数据。 我的一个想法是：

使用JSP创建一个将被隐藏的虚拟表行

检索到带有数据的响应后，转换为JSON对象

使用JS/JQuery克隆每个JSON对象的虚拟行

---

这是一个好的解决方案吗？或者有更好的方法吗？

除非数据非常庞大或快速变化的“实时”信息，否则请在表格中以一系列

…

元素（每个下拉选项一个）与页面一起提供。在下拉菜单中附加一个“onchange”处理程序，该处理程序显示与当前所选选项对应的tbody，并隐藏所有其他选项

---

如有必要，您可以使用类似的AJAX方法来获取数据。为页面提供空

…

元素-每个选项一个。然后从下拉菜单的onchange处理程序中“按需”填充tbodys，并如上所述显示/隐藏。如果合适，您可以在inchange处理程序中包含一个测试，以确保每个数据集只提取一次—如果已经接收到数据，那么它将缓存在其tbody中。最终，当所有tbody都被填充时，这个解决方案与上面的解决方案完全相同。

更好的方法可能是使用类似handlebar.js或mustache.js的模板（或任何其他前端模板引擎），因为它们都会获取JSON对象并将其插入可以附加到html中的模板中。如果您通过AJAX获取数据，那么这种方法非常有效，即使AJAX返回JSON，效果也会更好

如果您的项目允许使用第三方JQuery插件，我建议您看看。开箱即用，它可以满足您的所有需求。我在各种项目上使用DT已有几年了，发现它是一个强大而稳定的插件。

这种方法非常好，可能在某种程度上是有效的，因为您只需要按需请求数据。