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