Fatal编程技术网
  • javascript/
  • 在javascript上生成带有图像的表

在javascript上生成带有图像的表

javascript html image

在javascript上生成带有图像的表,javascript,html,image,html-table,Javascript,Html,Image,Html Table,我想创建一个按钮，生成一个3x3 HTML表，用于纸牌游戏，其中每个单元格对应一个图像。目前，我主要关注的是使用一个循序渐进的原理，使用从数组元素中提取的卡号填充单个单元格。这就是最终结果在HTML中的样子，它是从生成的脚本派生出来的 <table style="width:100%"> <tr> <td><img src="1.png"></td> <td><img sr

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


创造
函数createTable（）{
var甲板=[1,2,3,4,5,6,7,8,9]；
函数shuffle（o）{//v1.0
对于（var j，x，i=o.length；i；j=Math.floor（Math.random（）*i），x=o[--i]，o[i]=o[j]，o[j]=x）；
返回o；
}
洗牌（牌组）；
document.getElementById（“1”）.innerHTML=“+deck[0]+”“+deck[1]+”“+deck[2]+”+
“+deck[3]+”+deck[4]+“+deck[5]+”+
“+deck[6]+”+deck[7]+“+deck[8]+”+
;
}
注意 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>


创造
函数createTable（）{
var甲板=[1,2,3,4,5,6,7,8,9]；
函数洗牌（o）{
对于（var j，x，i=o.length；i；j=Math.floor（Math.random（）*i），x=o[--i]，o[i]=o[j]，o[j]=x）；
返回o；
}
洗牌（牌组）；
document.getElementById（“1”）.innerHTML=“+deck[1]+”“+deck[2]+”+
“+deck[3]+”+deck[4]+“+deck[5]+”+
“+deck[6]+”+deck[7]+“+deck[8]+”
;
}
您有一个额外的“+”

document.getElementById（“1”）.innerHTML=“+deck[0]+”“+deck[1]+”“+deck[2]+”+
“+deck[3]+”+deck[4]+“+deck[5]+”+
“+deck[6]+”+deck[7]+“+deck[8]+”；
应该会更好。

你有一个额外的“+”

document.getElementById（“1”）.innerHTML=“+deck[0]+”“+deck[1]+”“+deck[2]+”+
“+deck[3]+”+deck[4]+“+deck[5]+”+
“+deck[6]+”+deck[7]+“+deck[8]+”；
应该可以更好地工作。

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

未捕获的语法错误：意外标记

如果您更新以下代码，可能会有所帮助：

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=“+deck[0]+”“+deck[1]+”“+deck[2]+”+
“+deck[3]+”+deck[4]+“+deck[5]+”+
“+deck[6]+”+deck[7]+“+deck[8]+”+
;
为此：

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=“+deck[0]+”“+deck[1]+”“+deck[2]+”+
“+deck[3]+”+deck[4]+“+deck[5]+”+
“+deck[6]+”+deck[7]+“+deck[8]+”；
要循环数组并使用图像创建表结构，可以执行以下操作，例如：

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

函数createTable（）{
var甲板=[1,2,3,4,5,6,7,8,9]；
函数shuffle（o）{//v1.0
对于（var j，x，i=o.length；i；j=Math.floor（Math.random（）*i），x=o[--i]，o[i]=o[j]，o[j]=x）；
返回o；
}
洗牌（牌组）；
var html=''；
对于（变量i=0；i
当我加载您的代码时，我会在浏览器控制台中看到以下消息：

未捕获的语法错误：意外标记

如果您更新以下代码，可能会有所帮助：

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=“+deck[0]+”“+deck[1]+”“+deck[2]+”+
“+deck[3]+”+deck[4]+“+deck[5]+”+
“+deck[6]+”+deck[7]+“+deck[8]+”+
;
为此：

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=“+deck[0]+”“+deck[1]+”“+deck[2]+”+
“+deck[3]+”+deck[4]+“+deck[5]+”+
“+deck[6]+”+deck[7]+“+deck[8]+”；
要循环数组并使用图像创建表结构，可以执行以下操作，例如：

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

函数createTable（）{
var甲板=[1,2,3,4,5,6,7,8,9]；
函数shuffle（o）{//v1.0
对于（var j，x，i=o.length；i；j=Math.floor（Math.random（）*i），x=o[--i]，o[i]=o[j]，o[j]=x）；
返回o；
}
洗牌（牌组）；
var html=''；
对于（变量i=0；i
在通过删除构建html（tr和td）的最后一行的额外+来修复代码后，只需替换

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

“”+deck[0]+“”
借

“”
。。。等其他索引，如
deck[1]
，
deck[2]
等。

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

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

“”+deck[0]+“”
借

“”
。。。等其他索引，如
deck[1]
，
deck[2]
等。

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

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

这是一篇关于w3学校的文章，介绍如何使用JavaScript创建HTML标记

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

document.getElementById("cell_1").innerHTML = deck[0];
您需要为所有9个单元格/值包含此逻辑，尽管您可以循环thro