Question

我想创建一个13 x 4的表，并将一个名为back.gif的图像插入到每个单元格中。它不起作用。

'td1.appendChild（backImg）;'行出错但我无法弄清楚。

我的代码如下所示：

<script>

var preLoadImages = new Array('<img src=\"0.png\">','<img src=\"1.png\">','<img src=\"2.png\">','<img src=\"3.png\">');
var cardSet = new Array (0,1,2,3,4);

var table = document.createElement('table');
for (var i = 0; i < 4; i++){
    var tr = document.createElement('tr');   
    for (var j = 0; j<13; j++){
        var td1 = document.createElement('td');
        var backImg = document.getElementById("imageBack");
        //backImg.src = "back.gif";

    td1.appendChild(backImg);
    tr.appendChild(td1);
    table.appendChild(tr);
    }
}
document.body.appendChild(table);

    </script>

    <img id="imageBack" src="back.gif" height="90" />

</body>

Answer 1

有一些问题出现了：

document.getElementById将返回null，因为在代码执行时<img>尚未构建。
你没有克隆图像而是重复使用
如果要克隆图像，则需要为每个图像实例创建一个新的id。

您可以尝试使用<img>在代码中创建document.createElement("img")。

var createBackImg = function() {
  var newImg = document.createElement("img");
  newImg.src = "back.gif";
  newImg.height = 90;
  return newImg;
}

然后，您可以使用append将其添加到DOM。

Answer 2

试试这个：

 $(document).ready(function(){
    var preLoadImages = new Array('<img src=\"0.png\">','<img src=\"1.png\">','<img src=\"2.png\">','<img src=\"3.png\">');
    var cardSet = new Array (0,1,2,3,4);

    var table = document.createElement('table');
    for (var i = 0; i < 4; i++){
        var tr = document.createElement('tr');   
        for (var j = 0; j<13; j++){
            var td1 = document.createElement('td');
            //create here your img element and set the src
            var img = document.createElement("img");
            img.setAttribute("src", "back.gif");
            td1.appendChild(img);
            tr.appendChild(td1);
            table.appendChild(tr);
        }
    }
    document.body.appendChild(table);
});

Answer 3

这是您的解决方案

<head>
  <script>
function myFunction(){
  var preLoadImages = new Array('<img src=\"0.png\">','<img src=\"1.png\">','<img src=\"2.png\">','<img src=\"3.png\">');
  var cardSet = new Array (0,1,2,3,4);
  var table = document.createElement('table');

  for (var i = 0; i < 4; i++){
    var tr = document.createElement('tr');   
    for (var j = 0; j<13; j++){
      var td1 = document.createElement('td');
      var backImg = document.createElement("img");
      backImg.src = "images/back.gif";
      td1.appendChild(backImg);
      tr.appendChild(td1);
      table.appendChild(tr);
    }
  }
  document.body.appendChild(table);
  alert("myFunc");
}
  </script>

</head>
<body onload="myFunction()">


</body>

在表格单元格中显示图像

3 个答案: