使用Javascript将单个图像连接到表中的单个单元格

我对编程和这个社区都是新手，我会尽可能地讲清楚。我需要创建一个HTML表16x16，每个单元格中都有一个按钮，每个单元格显示一个不同的图像（一个笑脸），而不同的单元格永远不会显示相同的笑脸。我有点卡住了，我也希望得到一个提示，让我试着自己继续前进。谢谢以下是创建表并显示图像的代码：

function displayImage(){
    var num = Math.floor(Math.random() * 256);
    document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
    document.getElementById("YourImage").style.visibility = "visible";
}
for(var r = 0; r < rows;r++)
{
    table += '<tr>';
    for(var c= 0; c< cols;c++)
    {
        table += '<td style="width:50px" id="(i++)">' + '<button type="button" onclick="displayImage()">' +
        "show me" + '</button>' + '</td>';
     }
     table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');

函数displayImage（）{
var num=Math.floor（Math.random（）*256）；
document.canvas.src='../../output/'+imagesArray[num]+'.png'；
document.getElementById（“YourImage”）.style.visibility=“可见”；
}
对于（var r=0；r

（ImagesArray没有显示可读性，但它只是收集所有256个二进制组合）。 问题是，每次我点击一个按钮，它都会显示一个随机图像，如果我再次点击同一个按钮，它会显示另一个，而我希望它总是为同一个按钮显示相同的图像。 注意：我不能删除按钮后或类似的技巧，因为球员（这是一个oTree实验）需要能够回到一个微笑，他看到任何时间。

---

非常感谢你的帮助

我将更改生成随机数的点，并将其从显示函数提前到表的初始化

创建一个数字从0到255的数组。在通过行和列循环创建表时，从该数组中选择一个随机数，并将其分配给按钮的id属性。请确保从数组中删除此数字，以便无法将其再次用于以下按钮。这样，256个数字中的每一个都将被使用，但顺序是随机的。当用户单击按钮时，使用

displayImage（this.id）

按钮的id用作调用

displayImage（）

的参数。因此，总是使用相同数量的按钮来获取相应的图像

守则：

//使用参数调用displayImage（）
函数显示图像（num）{
document.canvas.src='../../output/'+imagesArray[num]+'.png'；
document.getElementById（“YourImage”）.style.visibility=“可见”；
}
//创建数字从0到255（=行*列）的数组“nums”
var nums=[]；
对于（变量i=0；i<（行*列）；i++）{
推（一）；
};
对于（var r=0；r

这样，您将有相同的图像连接到每个按钮。它在创建表时是随机的，因此每次加载页面时顺序都不同

我假设您正在使用HTML5，因为只有这样才允许id属性仅由数字组成

注意：我不知道在创建

元素时，您希望使用

id=“（I++）”

实现什么。这样做只是用字符串

（i++）

命名每个id，这与id应该是唯一的想法相矛盾。如果要将ID命名为升序，例如从

td-0

到

td-255

，则应将行更改为：

table+=''+''show me'+''；

您不能只使用数字而不添加类似于

td-

的内容，因为按钮已经有纯数字作为id。

尝试以下方法：

var rows = 16, cols = 16;
var table = '';

function shuffle(array) { // shuffle (randomize) array elements
  var i = array.length, j, x;
  while (i) {
    j = Math.random() * i-- | 0;
    x = array[i];
    array[i] = array[j];
    array[j] = x;
  }
}

var rNums = new Array(rows * cols);
for (var i = 0; i < rows * cols; i++) {
  rNums[i] = i;
}
shuffle(rNums);

function displayImage(num) {
  //var num = Math.floor(Math.random() * 256);
  document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
  //document.getElementById("canvas").innerHTML = num;
  document.getElementById("YourImage").style.visibility = "visible";
}

var i = 0;

for (var r = 0; r < rows; r++) {
  table += '<tr>';
  for (var c = 0; c < cols; c++) {
    table += '<td style="width:50px" id="' + i + '"><button type="button" onclick="displayImage(' + rNums[i] + ')">show me</button></td>';
    i++; //go to next element of rNums array
  }
  table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');

var行=16，cols=16；
var表=“”；
函数shuffle（数组）{//shuffle（随机化）数组元素
var i=数组长度，j，x；
而(i){
j=Math.random（）*i--0；
x=数组[i]；
数组[i]=数组[j]；
数组[j]=x；
}
}
var rNums=新数组（行*列）；
对于（var i=0；i

您应该为图像编号创建一个随机数组（每行、每列），并将其存储在一个数组中。然后，当您想在按钮上显示图像时，请使用该信息。谢谢回复@S.Serp，但我很难理解（很可能是我的错，因为我使用HTML和JS还不到一个月）。您会建议创建一个包含行col坐标的数组，并使用它将二进制代码（在我的示例中类似于00110011、01010101，…）唯一地连接到每一行col坐标？但是怎么做呢？我已经发布了一个答案，看看并说出您的评论或任何问题。在您的实现中，您可能有两个或更多具有相同图像编号的按钮！这并不完全是独一无二的@真的吗？使用

nums.splice（）！我的问题是按钮的id，基本上，我错过了“this.id”部分并弄乱了标识（我在某处看到了I++但我不太相信它会起作用。感谢很多人，我希望我在某个时候也会同样有用；）