自己写一个json放在table中展示图片

最新推荐文章于 2023-04-12 09:16:58 发布

ZXH0122

最新推荐文章于 2023-04-12 09:16:58 发布

阅读量919

点赞数

分类专栏：前端 javascript 文章标签：前端

本文链接：https://blog.csdn.net/ZXH0122/article/details/107123628

版权

前端同时被 2 个专栏收录

84 篇文章 3 订阅

订阅专栏

javascript

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>使用json在页面展示图片</title>
    <style>
      table{border-collapse: collapse;}
      .over{font:size 12px;}
    </style>
  </head>
  <body>
    <table
      id="mytable"
      width="400"
      align="center"
      border="2"
    >
    <!-- 等待json插入图片数据 -->
    </table>
    <script>
      var imgArray = [
        {
          src:"img/1.jpg"
        },
        {
          src:"img/2.jpg"
        },
        {
          src:"img/3.jpg"
        },
        {
          src:"img/4.jpg"
        }
      ];
      var mytable = document.getElementById("mytable");
        for (var i = 0; i < imgArray.length; i++) {
          var otr = document.createElement("tr");
          otr.align = "center";
          otr.onmouseover = function () {
            this.classList.add("over");
          };
          otr.onmouseout = function () {
            this.classList.remove("over");
          };
          for (var pro in imgArray[i]) {
            var otd = document.createElement("td");
            var oimg = document.createElement("img");
            oimg.src=imgArray[i][pro];
            //img：require('图片路径')
            otd.appendChild(oimg);
            otr.appendChild(otd);
          }
          mytable.appendChild(otr);
        };
    </script>
  </body>
</html>

图片路径记得换成自己的欧！

ZXH0122

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自己写一个json放在table中展示图片

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl
复制链接

扫一扫

专栏目录