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

如何向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中添加内容和小图片的功能了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值