テーブルセルに画像を表示

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>

出典

2016-05-24 Big Spudnuts

です。要素を作成する前にその要素を参照しようとしています。また、appendChildはimgをコピーする代わりに各セルに移動します。各セルに新しいイメージを作成する必要があります。 – rcpinto

はこのお試しください：ここで

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

出典

2016-05-24 09:22:14 cralfaro

ありがとうcralfaro。好奇心が強いのですが、ユーザーアクション（ボタンクリックなど）の後に、preLoadImages配列の画像をテーブルに追加する方法を知っていますか？ –

画像パスのリストを配列にロードし、各位置ごとに画像を作成できますそのsrcと一緒にtd-trに追加します。ユーザーが何らかのボタンをクリックすると、すべてがトリガーされます。動作しなければならない – cralfaro

間違っていくつかのことがあります。<img>はまだないので、

document.getElementByIdはnullを返します。あなたのコードがある時までに構築されます実行される。
イメージを複製しないで再利用しています
イメージを複製する場合は、イメージインスタンスごとに新しいidを作成する必要があります。

document.createElement("img")を使用して<img>をコード内に作成できます。

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

次に、appendを使用してDOMに追加できます。

出典

2016-05-24 09:21:58 user3297291

をあなたのソリューションは、imgタグの下にスクリプトを移動しよう

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

出典

2016-05-24 09:28:55

テーブルセルに画像を表示

答えて

関連する問題