スライスされた画像を一緒にしようとしています

スライスされた画像がテーブルにあり、最初の行/行はOKですが、画像を完成させるためのコードはありません。私がそれをするたびに、イメージは、一緒に置くのではなく、分割のように面白くなります。スライスされた画像を一緒にしようとしています

<head> 
<script type="text/javascript"> 
    var noRows = 4; 
    var noCols = 5; 
    var rowRef = 1; 
     function buildTable(){ 
     document.writeln("<tr>"); 
     for (var x = 0; x < noCols; x++) { 
     document.writeln("<td>"); 
     document.writeln("<img src="); 
     document.writeln("'images/pica1_r.jpg"); 
     document.writeln(rowRef); 
     document.writeln("_c"); 
     document.writeln(x + 1); 
     document.writeln(".jpg' /></td>"); 
     } 
    document.writeln("</tr>"); 
    return; 
} 
</script> 
</head> 
<body> 
<table width="80%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> 
<script type="text/javascript"> 
    buildTable(); 
</script>

出典

2017-11-26 legacee

JavaScriptでテーブル全体を構築するのではなく、HTMLでテーブルを構築し、次にElement.innerHTMLを使用して関連するセルに画像を追加することをお勧めします。そうすれば複雑なループに苦労する必要はありません。また、挿入しようとしているイメージファイルの名前は何ですか？ '.jpg'拡張子を2回追加しているようです。 –

また、あなたのファイルが正しい名前であると仮定すると、上のコードは正常に動作しているようです：https://jsfiddle.net/3jsp7k0x/ –

ありがとうございました。それぞれの写真はpica1_r1.jpg、pica1_r2.jpgなどです。私はこのすべてに非常に新しい、まだ理解しようとしています。これまで数日かかりました。ちょうどうんざりする行の画像を正しく取得します。 element.innerHTMLの使用についてもう少し説明してください。ありがとうございます – legacee

あなたが持っている主な問題は、あなたが二回.jpg拡張子を出力していることです。現在の流れでは、images/pica1_r.jpg1_c1.jpgとimages/pica1_r.jpg1_c2.jpgなどを出力します。
"<img src='images/pica1_r" + x + ".jpg' />"

は、あなたも、あなた自身にこれを簡単に行うことができます：

代わりrowrefと_cいじり、私は単に混乱を防ぐ手助け、1本のライン上の画像タグのすべてを出力する文字列の連結を利用するだろう0ではなく1からループを開始すると、for (var x = 1; x < noCols + 1; x++)となります。

var noRows = 4; 
 
var noCols = 5; 
 
var rowRef = 1; 
 

 
function buildTable() { 
 
    document.writeln("<tr>"); 
 
    for (var x = 1; x < noCols + 1; x++) { 
 
    document.writeln("<td>"); 
 
    document.writeln("<img src='images/pica1_r" + x + ".jpg' />"); 
 
    document.writeln("</td>"); 
 
    } 
 
    document.writeln("</tr>"); 
 
    return; 
 
} 
 

 
buildTable();

が同様の列をカバーするために、あなたは二ループを利用するために必要な、外：

意志出力images/pica1_r1.jpg、images/pica1_r2.jpgなど次

<td>の出力のうちこれは全く新しい変数（私は yとなりました）である必要があり、それは noRowsに基づいている必要があります。

次の例では、すべて同じ5つのイメージを1行に含む4つの行が出力されます。このことができます

var noRows = 4; 
 
var noCols = 5; 
 
var rowRef = 1; 
 

 
function buildTable() { 
 
    for (var y = 1; y < noRows; y++) { 
 
    document.writeln("<tr>"); 
 
    for (var x = 1; x < noCols + 1; x++) { 
 
     document.writeln("<td>"); 
 
     //document.writeln("<img src='images/pica1_r" + x + ".jpg' />"); 
 
     document.writeln("<img src='http://placehold.it/10" + x + ".jpg' />"); 
 
     document.writeln("</td>"); 
 
    } 
 
    document.writeln("</tr>"); 
 
    } 
 
    return; 
 
} 
 

 
buildTable();

img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

希望を：私は単に画像ラインでコメントアウトされた行を入れ替えてもローカルで作業し、それを見るために、絶対的なホストされたいずれかのローカルの画像に置換しました！ :)

出典

2017-11-26 23:24:44

ありがとうございました。あなたの助けに感謝。これを試してみます – legacee

私はコードで遊んでいます、ありがとうございます。画像は4行にまとめることができますが、1行目と同じ画像が複製されます。完全な画像を4行にまとめる方法はわかりません。 – legacee

スライスされた画像を一緒にしようとしています

答えて

関連する問題