Question

我想创建一个按钮，生成一个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>

Answer 1

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

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

通过

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

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

Answer 2

你有额外的＆＃34; +＆＃34;

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>";

应该更好。

Answer 3

您的shuffle()非常复杂。我建议你写一些不那么奇特的代码。使代码更具可读性有助于发现潜在的错误。实际上，问题实际上并不那么难以找到：https://stackoverflow.com/a/34471591/1636522： - ）

＆＃13;

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);
}

＆＃13;

同样的注释适用于字符串连接：

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）：

＆＃13;

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);
}();

＆＃13;

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

＆＃13;

Answer 4

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

Uncaught SyntaxError：意外的令牌;

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

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;
}

Answer 5

如果要创建HTML元素，则不要将它们作为文本字符串写入并插入到现有HTML元素中。

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

这是一篇关于W3学校关于使用JavaScript的creatung 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];
}

希望这会有所帮助;）

Answer 6

除了不必要的＆＃39; +＆＃39;在你的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++;

});

在javascript

6 个答案: