Question

首先，我的编码经验包括修改简单的脚本以在我的页面上工作。其次，我已经搜索并发现了几个类似的问题，但不能完全按照它们的方式工作。

我需要一些帮助，用大约40张图像的数组填充3x3表格中的随机图像。我目前有一个使用backgroundImage属性的工作模板。我想改变它使用常规图像而不是背景图像，所以我最终可以添加模态图像我假设这行代码需要改变

cell1.style.backgroundImage =“url（”+ images [imagePos] +“）”;

我尝试了几种我在这里和其他地方找到的选项。这两个链接似乎最相关，但我似乎无法把它们拉在一起。

Randomly inserting images into table using Javascript

show random image from array in javascript

任何帮助，或者如果有更好的解决方案，我将非常感谢。

<html>
<head>
<title>Random BG Table</title>
<style>
.cell {
    background-position: center;
} 
</style>
<script>

var images = new Array();
    images.push("images/Image_01.jpg");
    images.push("images/Image_02.jpg");
    images.push("images/Image_03.jpg");
    images.push("images/Image_04.jpg");
    images.push("images/Image_05.jpg");
    images.push("images/Image_06.jpg");
    images.push("images/Image_08.jpg");
    images.push("images/Image_09.jpg");


function randomCellBG()
{
    var cell1 = document.getElementById("cell1");
    var imagePos = Math.round(Math.random()*(images.length-1));
    cell1.style.backgroundImage = "url("+images[imagePos]+")";

    var cell2 = document.getElementById("cell2");
    var imagePos = Math.round(Math.random()*(images.length-1));
    cell2.style.backgroundImage = "url("+images[imagePos]+")";

    var cell3 = document.getElementById("cell3");
    var imagePos = Math.round(Math.random()*(images.length-1));
    cell3.style.backgroundImage = "url("+images[imagePos]+")";

    var cell4 = document.getElementById("cell4");
    var imagePos = Math.round(Math.random()*(images.length-1));
    cell4.style.backgroundImage = "url("+images[imagePos]+")";

    cell5.style.backgroundColor = "gray"


}
</script>

</head>

<body onLoad="randomCellBG()"><br><br><br>
<table width="600" height="600" border="1" id="mainTable">
  <tr>
    <td width="200" class="cell" id="cell1">&nbsp;</td>
    <td width="200" class="cell" id="cell2">&nbsp;</td>
    <td width="200" class="cell" id="cell3">&nbsp;</td>
  </tr>
  <tr>
    <td width="200" class="cell" id="cell4">&nbsp;</td>
    <td width="200"  id="cell5">title</td>

  </tr>

</table>
</body>
</html>

Answer 1

使用innerHTML属性

function randomCellBG()
{
    var cell1 = document.getElementById("cell1");
    var imagePos = Math.round(Math.random()*(images.length-1));
    cell1.innerHTML = "<img src='"+images[imagePos]+"' />";

    var cell2 = document.getElementById("cell2");
    var imagePos = Math.round(Math.random()*(images.length-1));
    cell1.innerHTML = "<img src='"+images[imagePos]+"' />";

    var cell3 = document.getElementById("cell3");
    var imagePos = Math.round(Math.random()*(images.length-1));
    cell1.innerHTML = "<img src='"+images[imagePos]+"' />";

    var cell4 = document.getElementById("cell4");
    var imagePos = Math.round(Math.random()*(images.length-1));
    cell1.innerHTML = "<img src='"+images[imagePos]+"' />";

    cell5.style.backgroundColor = "gray";   
}

Answer 2

您可以通过JS创建一个元素，并使用'appendChild'函数将元素插入单元格中，而不是将图像设置为单元格的背景。

Answer 3

如果您有多个对象，请遵循以下准则：

将多个对象放在不同的组中。
- 离。图片的网址= 9个字符串/表格单元格= 5 <td>
如果可以减少任何组，请执行此操作。
- 离。所有9个字符串的路径均为"images/Image_"
- 离。最后一个单元格没有.cell类，但它没有获得图像。
将每个组收集到HTMLCollection或数组中，并存储变量中排除的内容（如果需要）。
- 离。 var base = "images/Image_" var imgs = ['01.jpg','02.jpg',...'09.jpg']
- 离。 var cellArray = Array.from(document.querySelectorAll('.cell'))
通过for循环或Array方法运行其中一个数组，并在每次迭代时运行一个函数，将两个数组都操作为所需的结果。
- 离。见演示

在下面的演示中，重构函数randomCellBG()将采用给定的图像文件名（imgs[]）数组及其所在的路径（base）。只要它们位于同一位置，此函数将接受任意数量的文件名。如果您想使其更具通用性，您可以将目标表作为参数，并将单元格数组更改为<td>而不是.cell类。

详情在演示

中发表

⍟特别注意OP的代码

演示

＆＃13;

/* An array of numbers, each reresenting the 
|| unique part of each image's url
⍟ var imgs = ['01.jpg', ... '09/jpg']
⍟ The array in demo is an array of numbers (no quotes)
⍟ but the one in OP is an array of strings (each are quoted)
*/
var imgs = [1, 2, 3, 4, 5, 6, 7, 8, 9];

/* The part of what each image url has in common
⍟ var base = 'images/Image_'
*/
var base = 'https://placehold.it/100x100/000/fff?text=';


function randomCellBG(base, imgs) {

  // Reference the <table>
  var T = document.getElementById('mainTable');

  /* Collect all .cell into a NodeList and convert
  || it into an array
  */
  var cellArray = Array.from(T.querySelectorAll('.cell'));

  // map() the array; run a function on each loop...
  cellArray.map(function(cel, idx) {

    // Get a random number 1 - 9
    var ran = Math.round(Math.random() * imgs.length);

    /* Concatenate base and random number to form
    || a string of a url of an image
    ⍟ result: "images/Image_08.jpg"
    */
    var img = base + ran.toString();

    /* Assign that url as the value to the 
    || backgroundImage property of the .cell
    || in current iteration
    */
    cel.style.backgroundImage = 'url(' + img + ')';

  });

}

// Call randomCellBG
randomCellBG(base, imgs);

＆＃13;

.cell {
  background-position: center;
}

td {
  background-color: grey
}

＆＃13;

<!doctype html>
<html>

<head>
  <title>Random BG Table</title>

</head>

<body><br><br><br>
  <table width="300" height="200" border="1" id="mainTable">
    <tr>
      <td width="100" class="cell" id="cell1">&nbsp;</td>
      <td width="100" class="cell" id="cell2">&nbsp;</td>
      <td width="100" class="cell" id="cell3">&nbsp;</td>
    </tr>
    <tr>
      <td width="100" class="cell" id="cell4">&nbsp;</td>
      <td colspan='2' id="cell5">title</td>

    </tr>

  </table>
</body>

</html>

＆＃13;

用随机图像填充表格

3 个答案:

演示