ajax数据更新table

Question

调用了ajax接口返回的数据，想要把数据填充进table表格中，目前学会的就只是创建子元素然后append到tbody中，感觉十分冗余，问问各位平时是怎么解决ajax请求数据更新表格内容的

Answer 1

拿到数据后便利生成dom字符串(tr列表)，然后把dom字符串塞入tbody中，可以使用innerHTML

Answer 2

h5前端一般有两种方式，一种就是你所提问的方法。
这样做不是说不好，它主要是简单，如果数据量不大，何乐不为？

传统开发，比如利用jquery进行dom添加时，添加一个行的唯一标识符，在更新时，你就不需要更新整个表格了，而是更新某个 tr 的内容即可。

<tbody id="userbody_list">
   <tr id="userbody_list__1">
       <td>xxxxx</td>
       <td>xxxxx</td>
   </tr>
</tbody>

还有一种方法呢，将表格进行动态绑定。
table 绑定一个数组，如果数组发生变化，表格的dom对应元素会自动更新。
参考：https://cn.vuejs.org/v2/guide...
ul和li 分别可以对应表格内容和行了

Answer 3

layui 或者 bootstrap
layui


https://lh_yun.gitee.io/layui...

bootstrap table

https://datatables.net/exampl...

再进一步就是用 vue react angular 的ui 框架了。

Answer 4

为什么我们仍要使用前端框架？
因为保持前端界面和数据同步是一件不简单的事情。