Question

<img>元素始终为空。我尝试过创建不同的循环并使用其他方法，但似乎没有什么能解决这个错误。有什么想法吗？

<script type="text/javascript">
    var cards = new Array();
    for(i = 0; i > 11; i++) {
        cards[i] = new Image();
        cards[i].src = "imgs/CardBack.jpg";
        document.theImage.src == cards[i].src;
    }
</script>
</head>

<body>

<table border="1" width="200px" height="400px">
    <tr>
        <td><img name="theImage"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Answer 1

为了访问“theImage”的src属性，我建议你document.getElementsByName('theImage')[0].setAttribute('src', cards[i].src);。

编辑：错误跟踪后的完整解决方案：https://jsfiddle.net/oqbkhb64/2/

干杯

Answer 2

代码有一些错误，请尝试以下

var cards = new Array();
for (var i = 0; i < 11; i++) {
    cards[i] = new Image();
    cards[i].src = "imgs/CardBack.jpg"
    document.theImage.src = cards[i].src;
}

希望它有效

Answer 3

您可以使用 getelementsByTagName() 方法获取所有<td>元素，然后在循环中创建图像并将其分配给每个td：

<强> HTML：

<table border="1" width="200px" height="400px" id="myTable">
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
</table>

<强>使用Javascript：

var table = document.getElementById("myTable"); 
var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
   var img=document.createElement("img");
   img.src="imgs/CardBack.jpg";
   cells[i].appendChild(img);     
}

这是DEMO Fiddle。

尝试使用JavaScript在表中放置图像

3 个答案: