jquery数据遍历动态添加到table

需求: 下拉框动态数据,根据选中选项监听id发送ajax获取对应表格展示数据

jquery数据遍历动态添加到table_第1张图片

 通过监听下拉选项发送ajax请求,通过遍历后台数据给table追加每一个item,如下

jquery数据遍历动态添加到table_第2张图片

 由于后台返回的数据map为对象格式,所以采用了对象的遍历方法Reflect.ownKeys(obj)得到数组格式所有的key 返回的数据如下格式

jquery数据遍历动态添加到table_第3张图片

又由于表格中每个tr还需要 click 和mouseover 事件 为此给tr加了自定义属性方便传参, 事件如下

jquery数据遍历动态添加到table_第4张图片 

又由于 触发事件后展示的内容并非全部,所以又拆分了一下, 如下

jquery数据遍历动态添加到table_第5张图片

最终实现了点击tr渲染到计算公式(表达式),以及鼠标移动展示对应的key 和 value 

可以的话给个赞,喜欢的话可以关注,陆续更新项目中的点滴,一起加油.时间虽然无声无息 ,但会见证和证明每一个人的努力.

你可能感兴趣的:(开发,jquery,前端,javascript)