イメージをテーブルに1つずつ追加してください

誰かが（preLoadArrayと呼ばれる）配列からイメージを1つずつテーブルのセルに読み込む方法をアドバイスできますか？表は13 x 4セルです。この関数は、画像IDをインクリメントして、自身にコールバックして短いsetTimeout（）を追加して、プロセスを遅らせることを目的としています。&アニメーションを作成します。どんな助けもありがとう。ありがとう。 JavaScriptのdocument.writeln()には、このような方法はありませんイメージをテーブルに1つずつ追加してください

function showCard(){ 
//when button is clicked 
document.writeln("<table>"); 
    for (m = 0; m < 4; m++) { 
    document.writeln("<tr>"); 
    for (n = 0; n < 13; n++) { 
     preLoadImages[n] = new Image(); 
     preLoadImages[n].src = n + '.gif'; 

     document.writeln("<td id=\"\"><img height=\"80\" id=\"" + preLoadImages[(m * 13) + n] + "\" \"></td>"); 
     } 
     document.writeln("</tr>"); 
    } 
    document.writeln("</table>"); 
}

出典

2016-05-25 Big Spudnuts

あなたが直接自分のSRCを指定している場合は、任意の配列で画像をプリロードする必要はありません...ここで

はあなた

役立つコードです

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script> 
     function showCard() { 

      var t = "<table><thead></thead><tbody>"; 
      for (m = 0; m < 4; m++) { 
       t += "<tr>"; 
       for (n = 0; n < 4; n++) {    

        t += "<td><img height=\"80\" width=\"80\" src=\"" + ((m * 4) + n) + ".jpg\"/></td>"; 
       } 
       t += "</tr>"; 
      } 
      t += "</tbody></table>"; 

      document.getElementById("ll").innerHTML = t; 
     } 
    </script> 
    </head> 
    <body onload="showCard();"> 
    <div id="ll"></div> 
    </body> 
</html>

出典

2016-05-25 05:57:07 Mavie

ビクターに感謝します。これを既存のテーブルに追加する必要がある場合は、doc appendを使用しますか？一度私はこれを把握し、私は各画像にsetTimeoutを適用する必要があります。 –

@BigSpudnutsはい！ docの 'append'関数を使うこともできますし、この場合は' addRow（） '関数を使って結果とタイマーを取得することができます。 – Mavie

は、おそらくあなたはdocument.write()を使用することを意味しました。しかし、これは使用することはお勧めしません。 innerHTMLまたは.appendChildで行く方が良い：

function showCard() { 
    var t = "<table>" 
    for (m = 0; m < 4; m++) { 
    t += "<tr>"; 
    for (n = 0; n < 13; n++) { 
     preLoadImages[n] = new Image(); 
     preLoadImages[n].src = n + '.gif'; 

     t += "<td id=\"\"><img height=\"80\" id=\"" + preLoadImages[(m * 13) + n] + "\" \"></td>"; 
    } 
    t += "</tr>"; 
    } 
    t += "</table>"; 

    document.innerHTML = t; 

}

出典

2016-05-25 05:37:43 Jai

イメージをテーブルに1つずつ追加してください

答えて

関連する問題