Array of images into table- Javascript

Question

I am trying to create a table of 6 images, 2 rows and 3 columns large. I have created an array for all of them in the head of the program. Should it be in the body? The images within the table will later need to be clickable, directing to the same page (ie. google.com). I don't know how to put the images individually into the table that I have created.

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

... and so on for all the rest of the images

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

... and so on for the rest of the images

Have edited it to find a bug (notice the missing closing tag in the script), but still don't know what was asked here. ) — raina77ow
– raina77ow, Commented Jun 25, 2012 at 22:43
I'm asking how do i place the images from my array into the table that i have created. — iamtheuser
– iamtheuser, Commented Jun 25, 2012 at 22:50

Niet the Dark Absol · Accepted Answer · 2012-06-25 22:47:47Z

4

You appear to be neglecting DRY - Don't Repeat Yourself. You are repeating code for every image you want to create. Instead, try this:

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

This will basically insert the table with all the images right where the script is. To add more images, just add more URLs to the array. To change how many are shown on each row, just change the columns variable. This code is more complicated than your original code, but on the other hand it is much more scaleable and easier to modify.

answered Jun 25, 2012 at 22:47

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Travis J Over a year ago

+1 Way to throw a little of everything in there :) This is the approach I would take in production but it could be a little over this person's head. It would be nice if you explained your use of a self-executing closure, the dom appending, and the dom element creation for the op.

raina77ow Over a year ago

+1 for the same reasons. But I won't be surprised if what's the OP now thinks about this is something like "???!!!???" )

RobG Over a year ago

It doesn't allow for the case where the number of images isn't evenly divisible by the number of rows. Perhaps not important to the OP. The chaining isn't pretty and not easily maintainable.

Travis J · Accepted Answer · 2012-06-25 22:46:58Z

0

This is one way you could do it:

<td><img id="theImage" /></td>
<script>
 document.getElementById("theImage").src = img[0].src;
</script>

answered Jun 25, 2012 at 22:46

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

2 Comments

iamtheuser Over a year ago

what is "theImage"? a link or the name ie. img[0]

Travis J Over a year ago

@iamtheuser - "theImage" is just the id of the image tag.

Collectives™ on Stack Overflow

Array of images into table- Javascript

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related