Javascript 将HTML表格转换为imges

我想编写JavaScript代码从数组中读取信息，并将其表示为HTML表，然后用特定图像替换特定元素

我想我需要遍历二维数组并使用swap case，例如，如果当前元素为“”，则需要将其与特定图像交换

二维数组是这样的

HTML:

JavaScript:

var array = [["h", " ", "tl", " ", "sl", " "],
                 ["b", "tl", " ", " ", "sl", " "],
                 ["t", " ", " ", " ", "sl", " "],
                 [" ", "sl", " ", " ", " ", "s"],
                 [" ", "sl", " ", " ", "tl", "b"],
                 [" ", "sl", " ", "tl", " ", "t"]],
    table = document.getElementById("table");

for(var i = 0; i < table.rows.length; i++) {
  for(var j = 0; j < table.rows[i].cells.length; j++) {
      table.rows[i].cells[j].innerHTML = array[i][j];
  }
}

var数组=[[“h”、“”、“tl”、“”、“sl”、“”]，
[“b”、“tl”、“我”、“我”、“我”、“我”]，
[“t”、、、、、、“sl”、、]，
[“”、“sl”、“”、“”、“”、“”和“s”]，
[“”、“sl”、“”、“”、“tl”、“b”]，
[、“sl”、“tl”、“t”]，
table=document.getElementById（“table”）；
对于（var i=0；i

切换如下：

“”=

“h”=

“b”=

“t”=

“sl”=

“tl”=

---

很抱歉这样回答这个问题，但我还是新手，这会毁了我。

您可以创建一个由代码键控的对象，并使用相应的图像URL作为值：

var数组=[[“h”、“”、“tl”、“”、“sl”、“”]，
[“b”、“tl”、“我”、“我”、“我”、“我”]，
[“t”、、、、、、“sl”、、]，
[“”、“sl”、“”、“”、“”、“”和“sl”]，
[“”、“sl”、“”、“”、“tl”、“b”]，
[、“sl”、“tl”、“t”]，
table=document.getElementById（“table”），
地图={
" ": "https://cdn.discordapp.com/attachments/394449403911471105/574967925254127659/empty.png",
“h”：https://cdn.discordapp.com/attachments/394449403911471105/574968068187488256/head.jpg",
“b”：https://cdn.discordapp.com/attachments/394449403911471105/574968145719197707/body.jpg",
“t”：https://cdn.discordapp.com/attachments/394449403911471105/574968236060180481/tail.jpg",
“sl”：https://cdn.discordapp.com/attachments/394449403911471105/574968327948992522/standing_ladder.jpg",
“tl”：https://cdn.discordapp.com/attachments/394449403911471105/574968405011202078/tilted_ladder.jpg"
};
对于（var i=0；i

“…如果当前元素为“”，则要交换…”：您的意思是必须替换一个空格？通过哪个图像？还有“B”吗？你有对应于字符串的图像列表吗？是的，对于每个空元素，都有一个特定的图片来替换它，对于其余元素也是如此，最后它会像一个大的图片板一样显示出来。问题是我不知道怎么做，ogogle搜索没有帮助，所以我想也许我可以在这里问一下。谢谢你的回答：）你能给问题添加每个案例的图片吗？我编辑了它，有点像蛇和梯子，但只有图片：）有效：D非常感谢：）我还有一个问题，当我问一个朋友关于它的时候，他告诉我这样做：开关（currentcell）{//some code…case s:mytable.cell.innerHTML=''；//some more code}是这样吗？还是不太方便？谢谢你的帮助：）我真的很感激。是的，这是另一种可能性，但我不喜欢

开关

，当你设置

innerHTML

时，你真的应该转义一些特殊字符（

var array = [["h", " ", "tl", " ", "sl", " "],
                 ["b", "tl", " ", " ", "sl", " "],
                 ["t", " ", " ", " ", "sl", " "],
                 [" ", "sl", " ", " ", " ", "s"],
                 [" ", "sl", " ", " ", "tl", "b"],
                 [" ", "sl", " ", "tl", " ", "t"]],
    table = document.getElementById("table");

for(var i = 0; i < table.rows.length; i++) {
  for(var j = 0; j < table.rows[i].cells.length; j++) {
      table.rows[i].cells[j].innerHTML = array[i][j];
  }
}