在 javascript 上生成带有图像的表格答案

【问题标题】：Generate table with images on javascript在 javascript 上生成带有图像的表格
【发布时间】：2016-04-01 00:05:45
【问题描述】：

我想创建一个按钮，该按钮生成一个用于纸牌游戏的 3x3 HTML 表格，其中每个单元格对应一个图像。目前，我主要专注于使用从数组元素中获取的卡号填充单个单元格，使用逐步的基本原理。这就是最终结果在 HTML 中的样子，源自生成的脚本；

<table style="width:100%"> 
    <tr> 
        <td><img src="1.png"></td> 
        <td><img src="2.png"></td> 
        <td><img src="3.png"></td> 
    </tr> 
    <tr> 
        <td><img src="4.png"></td> 
        <td><img src="5.png"></td> 
        <td><img src="6.png"></td> 
    </tr> 
    <tr> 
        <td><img src="7.png"></td> 
        <td><img src="8.png"></td> 
        <td><img src="9.png"></td> 
    </tr> 
</table>

这就是我目前的工作，虽然没有太大的成功

<!DOCTYPE html>
<html>
<body>

<table id="1"> 
</table>

<button onclick="createTable()">Create</button>

<script>
function createTable() {
    var deck = [1,2,3,4,5,6,7,8,9];

    function shuffle(o) { //v1.0
      for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
      return o;
    }

    shuffle(deck);
    document.getElementById("1").innerHTML = "<tr><td>" + deck[0] + "</td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" +
    "<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" +
    "<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>" +
    ;
}
</script>

</body>
</html>

注意使用非常基本且不言自明的功能来洗牌 9 张牌。

编辑。我的最终版本，正在返回损坏的图像。

<!DOCTYPE html>
<html>
<body>

<table id="1"> 
</table>

<button onclick="createTable()">Create</button>

<script>
function createTable() {
    var deck = [1,2,3,4,5,6,7,8,9];

    function shuffle(o) {
      for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
      return o;
    }

    shuffle(deck);
    document.getElementById("1").innerHTML = "<tr><td><img src=" + deck[0] + ".png'></td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" +
    "<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" +
    "<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>"
    ;
}
</script>

</body>
</html>

【问题讨论】：

在您的最终版本中，您在 png 字符串之后有一个额外的撇号。您需要在 src= 之后附加一个撇号，因此最终 html 中的文件名周围有撇号，例如 src='1.png'，或者您必须删除额外的撇号，这将导致 html 没有撇号，包含src=1.png

标签： javascript html image html-table

【解决方案1】：

通过删除构建 html（tr 和 td）的最后一行的额外 + 来修复代码后，您只需替换

"<td>" + deck[0] + "</td>"

通过

"<td><img src='" + deck[0] + ".png'></td>"

... 等其他索引，如 deck[1]、deck[2] 等。

【讨论】：

正是我想要的，但由于某种原因 FIrefox/Chrome 没有显示它们（我得到了损坏的图像图标）。所有 9 个 PNG 都与脚本位于同一文件夹中。
那么您的 html 代码中可能有一些错误。把它贴在这里（只是 innerHTML 分配），以便我可以查看它。
您可以从我在第一篇文章中的最新编辑中查看它：)
我在那里添加了我的评论。您忘记在 src=' 之后加上撇号...在我的 HTML 代码中实际上有撇号和双引号，我提供的答案是：s r c = '" ...请仔细复制和粘贴代码。
不小心删除了那个。谢谢！

【解决方案2】：

你有一个额外的“+”

document.getElementById("1").innerHTML = "<tr><td>" + deck[0] + "</td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" +
"<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" +
"<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>";

应该会更好。

【讨论】：

【解决方案3】：

您的shuffle() 非常复杂。让我建议你少写一些奇异的代码。使您的代码更具可读性将有助于发现潜在的错误。确实，问题其实并不难定位：https://stackoverflow.com/a/34471591/1636522 :-)

var deck = [1, 2, 3, 4, 5, 6, 7, 8, 9];
document.write(JSON.stringify(shuffle(deck), 0, 1));

function shuffle (anArray) {
  var i, j, x, l = anArray.length;
  for (i = 0; i < l; i++) {
    j = rdmInt(l);
    x = anArray[i];
    anArray[i] = anArray[j];
    anArray[j] = x;
  }
  return anArray;
}

function rdmInt (max) {
  return Math.floor(Math.random() * max);
}

同样的评论适用于您的字符串连接：

document.getElementById("1").innerHTML = ""
+ "<tr>"
+   "<td><img src=" + deck[0] + ".png'></td>"
+   "<td>" + deck[1] + "</td>"
+   "<td>" + deck[2] + "</td>"
+ "</tr>"
+ "<tr>"
+   "<td>" + deck[3] + "</td>"
+   "<td>" + deck[4] + "</td>"
+   "<td>" + deck[5] + "</td>"
+ "</tr>"
+ "<tr>"
+   "<td>" + deck[6] + "</td>"
+   "<td>" + deck[7] + "</td>"
+   "<td>" + deck[8] + "</td>"
+ "</tr>";

您现在能看到错误吗（第 3 行）？这是一个修复：

+   "<td><img src=\"" + deck[0] + ".png\"></td>"

您可以走得更远以避免重复 (dry)：

var deck = [
  "KNhxd", "7CtbR", "Os8qX", 
  "21SKd", "CWMZC", "43C1X", 
  "lpGvK", "8Wk7W", "Y3JFi"
];

// preserve the global namespace with an IIFE

document.body.innerHTML = function () {

  var ROOT = "http://i.stack.imgur.com/";

  function toTable (deck) {
    var i, html = "";
    for (i = 0; i < 3; i++) {
      html += toTr(deck.slice(i * 3, (i + 1) * 3));
    }
    return "<table>" + html + "</table>";
  }

  function toTr (row) {
    return "<tr>" + row.map(toTd).join('') + "</tr>";
  }

  function toTd (cell) {
    return "<td><img src=\"" + ROOT + cell + ".png\" /></td>";
  }
  
  return toTable(deck);
}();

body{background:#006600;}
img{display:block;width:35px;}

【讨论】：

【解决方案4】：

如果您想创建 HTML 元素，那么您不能只是将它们写为文本字符串并插入到现有的 HTML 元素中。

您创建一个元素节点（和文本节点，如果适用）并将其附加到您现有的 HTML 元素。

这是关于 w3 学校的一篇关于使用 JavaScript 创建 HTML 标记的文章。

http://www.w3schools.com/jsref/met_document_createelement.asp

如果您的表格总是有 9 个单元格，那么为什么不直接写出 HTML，给每个单元格一个唯一的 ID。然后你可以使用类似于你所拥有的代码。

document.getElementById("cell_1").innerHTML = deck[0];

您需要为所有 9 个单元格/值包含此逻辑，尽管您可以像这样循环遍历它们；

for (i = 0; i < 8; i++) { 
  var cellNo = i + 1;
  document.getElementById("cell_" + cellNo).innerHTML = deck[i];
}

希望这会有所帮助；）

【讨论】：

【解决方案5】：

除了innerHTML添加末尾不必要的'+'，我建议让你的代码更灵活。除了将硬编码的数据添加到您的 innerHTML 之外，您还可以执行以下操作：

var endOfRowCounter = 0;
var toAppend = "";
deck.forEach(function(card){
   if(endOfRowCounter % 3 == 0) {
        toAppend += "<tr>";
    }

    toAppend += "<td><img src=\"" + card + ".png\"></td>";

    if(endOfRowCounter % 3 == 2)
    {
        toAppend += "</tr>";
    }

    endOfRowCounter++;

});

【讨论】：

【解决方案6】：

当我加载您的代码时，我在浏览器控制台中收到此消息：

Uncaught SyntaxError: Unexpected token ;

如果您更新此代码可能会有所帮助：

document.getElementById("1").innerHTML = "<tr><td>" + deck[0] + "</td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" +
    "<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" +
    "<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>" +
    ;

到这里：

document.getElementById("1").innerHTML = "<tr><td>" + deck[0] + "</td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" +
                "<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" +
                "<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>";

要循环您的数组并使用图像创建表结构，您可以这样做：

function createTable() {
    var deck = [1,2,3,4,5,6,7,8,9];

    function shuffle(o) { //v1.0
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    }

    shuffle(deck);

    var html = '';
    for (var i = 0; i < deck.length; i++) {
        if (i%3 === 0) {
            html += "<tr>";
        }
        html += '<td><img src="' + deck[i] + '.png"></td>';
        if (i%3 === 2) {
            html += "</tr>";
        }
    }
    document.getElementById("1").innerHTML = html;
}

【讨论】：