首先自定义一个数组信息,如下图:
JavaScript实现表格信息的填写
输出结果如下:
JavaScript实现表格信息的填写
再根据数组的内容,生成页面的table表格,首先我们先做出表格的头部,并添加一些CSS样式,如下图:
JavaScript实现表格信息的填写
JavaScript实现表格信息的填写
JavaScript实现表格信息的填写
此时表格的内部什么也没有,我们就需要通过循环嵌套来生成表格,首先通过设置标签里面的属性值对tbody标签进行操作,这是JavaScript中操作标签的一种方式,其次还需要在循环嵌套的最后添加标签id属性值.innerHTML = 内容,就是向指定的标签中输入内容。
JavaScript实现表格信息的填写
JavaScript实现表格信息的填写
最后通过循环的方式获取数组中的所有数据再拼接生成对应的字符串内容,将拼接生成的所有tr td还有单元格内容写入到tbody标签内。
在数组中一组数组有几个单元就有几行内容,一个单元就是一组数据信息,就是一行内容,于是就可以通过外层循环来实现,每一行中的信息是内层循环实现的,外层循环里面包含两部分内容,一是独立生成的序号部分,这一部分不在数组单元数据内,可以使用一维数组的索引下标+1来实现,二是二维数组具体信息部分,二维数组中有几个单元就生成几个单元格,单元格的内容就是二维数组的具体数据,实现如下:
JavaScript实现表格信息的填写
此时就完成了全部的代码,我们看一下运行结果:
JavaScript实现表格信息的填写

相关文章:

  • 2021-08-20
  • 2021-12-19
  • 2022-01-07
  • 2021-12-15
  • 2021-08-06
  • 2021-12-09
  • 2021-12-05
  • 2021-09-01
猜你喜欢
  • 2021-12-15
  • 2021-10-17
  • 2021-12-16
  • 2021-12-24
  • 2021-08-02
  • 2021-11-19
  • 2021-12-15
相关资源
相似解决方案