0

6 つの画像、2 行 3 列の大きなテーブルを作成しようとしています。プログラムの頭にそれらすべての配列を作成しました。体内にあるべきか？表内の画像は後でクリック可能にする必要があり、同じページ (例: google.com) に移動します。作成したテーブルに画像を個別に配置する方法がわかりません。

<head>
  <script>
    var img = new Array(6);
    img[0] = new (400,200)
    img[0].src"image1.jpg"
  </script
</head>

...残りのすべての画像についても同様です

<body>
    <table border ="0">
    <tr>
    <td>document.write(img[0]) </td>
    </tr>
    </table>
</body>

... 残りの画像についても同様

4

2 に答える 2

4

あなたはDRYを無視しているようです - 自分自身を繰り返さないでください. 作成するすべての画像に対してコードを繰り返しています。代わりに、これを試してください：

<script type="text/javascript">
    (function() {
        var images = [
            "image1.jpg",
            "photo.jpg",
            "graphic.png",
            "animation.gif"
        ], columns = 3,
        l = images.length, i,
        table = document.createElement('table'),
        tbody = table.appendChild(document.createElement('tbody')),
        tr, td, img;
        for( i=0; i<l; i++) {
            if( i % columns == 0) tr = tbody.appendChild(document.createElement('tr'));
            tr.appendChild(document.createElement('td'))
              .appendChild(document.createElement('img'))
              .src = images[i];
        }
        document.body.appendChild(table);
    })();
</script>

これにより、基本的に、スクリプトがある場所にすべての画像を含むテーブルが挿入されます。さらに画像を追加するには、配列に URL を追加するだけです。各行に表示される数を変更するには、columns変数を変更するだけです。このコードは元のコードよりも複雑ですが、その一方で、はるかにスケーラブルで変更が容易です。

于 2012-06-25T22:47:47.507 に答える
0

これはあなたがそれを行うことができる1つの方法です:

<td><img id="theImage" /></td>
<script>
 document.getElementById("theImage").src = img[0].src;
</script>
于 2012-06-25T22:46:58.733 に答える