如何向table td中动态添加数据和图片
js基础
本身向表格中添加数据是很简单的,但是在工作中数据都是动态的,从接口中调用过来的数据。所以,动态添加数据的技能变得很重要。
其实vue 中v-for可以很简单的遍历出数据,但是在表格里就变得有一些愚笨了。因为表格中,每行还对应着每列的分类,无脑v-for已经不可取了。
所以在请教前辈后了解了另一种动态添加数据的方法:js的拼接
如何用js拼接的方法动态获取数据
话不多说,直接上代码
//这是表格代码
<tr>
<td id="risk0"></td>
<td id="risk1"></td>
</tr>
<tr>
<td id="risk2"></td>
<td id="risk3"></td>
</tr>
<tr>
<td id="risk4"></td>
<td id="risk5"></td>
</tr>
<tr>
<td id="risk6"></td>
<td id="risk7"></td>
</tr>
<tr>
<td id="risk8"></td>
<td id="risk9"></td>
</tr>
//这是js代码
this.riskCategories = resp.riskCategories
if (resp.riskCategories.length != 0) {
for (let i = 0; i < 10; i++) {
if (resp.riskCategories.length > i)
document.getElementById('risk' + i).innerHTML =
"<img class='image' src='" + this.riskCategories[i].iconUrl + "' />" + this.riskCategories[i].name
}
}
开头是将请求到的数据添加到一个数组里。
加下来是判断,首先判断这个数组长度是否为空(判断有没有数据,如果有就接着执行)
之后根据你的表格长度进行for循环,接下来这个判断是要判断当前数据的长度的,如果数据只有3条,3>4不成立也就不会再执行下面的插入数据了,表格中就只会渲染3条数据里了
最后就是插入数据了,结合tr中的id可以很清晰的理解
下面展示一些 内联代码片
。
document.getElementById('risk' + i).innerHTML = this.riskCategories[i].name
就是获取到这个元素的id之后,修改它里面的内容为数组中的数据
如果想在td里的文本前加个小图标,就可以拼接一个img
,就是开头代码里的那种
自此,就实现了动态在td中添加内容和小图片的功能了