如何向table td中动态添加数据和图片

您所在的位置：网站首页 › 图片怎样添加到表格里 › 如何向table td中动态添加数据和图片

如何向table td中动态添加数据和图片

2024-07-17 03:47| 来源: 网络整理| 查看: 265

如何向table td中动态添加数据和图片 js基础如何用js拼接的方法动态获取数据

js基础

本身向表格中添加数据是很简单的，但是在工作中数据都是动态的，从接口中调用过来的数据。所以，动态添加数据的技能变得很重要。其实vue 中v-for可以很简单的遍历出数据，但是在表格里就变得有一些愚笨了。因为表格中，每行还对应着每列的分类，无脑v-for已经不可取了。所以在请教前辈后了解了另一种动态添加数据的方法：js的拼接

如何用js拼接的方法动态获取数据

话不多说，直接上代码

//这是表格代码 //这是js代码 this.riskCategories = resp.riskCategories if (resp.riskCategories.length != 0) { for (let i = 0; i i) document.getElementById('risk' + i).innerHTML = "" + this.riskCategories[i].name } }

开头是将请求到的数据添加到一个数组里。加下来是判断，首先判断这个数组长度是否为空（判断有没有数据，如果有就接着执行）之后根据你的表格长度进行for循环，接下来这个判断是要判断当前数据的长度的，如果数据只有3条，3>4不成立也就不会再执行下面的插入数据了，表格中就只会渲染3条数据里了最后就是插入数据了，结合tr中的id可以很清晰的理解下面展示一些内联代码片。

document.getElementById('risk' + i).innerHTML = this.riskCategories[i].name

就是获取到这个元素的id之后，修改它里面的内容为数组中的数据如果想在td里的文本前加个小图标，就可以拼接一个img ，就是开头代码里的那种自此，就实现了动态在td中添加内容和小图片的功能了

【本文地址】

如何向table td中动态添加数据和图片

如何向table td中动态添加数据和图片

今日新闻

推荐新闻