www.webdeveloper.com
Results 1 to 3 of 3

Thread: Loop to Create Tables

  1. #1
    Join Date
    Nov 2012
    Posts
    16

    Loop to Create Tables

    First of all here's the script i have so far
    Code:
    function picDisplay () 
    {
    var puppyPics = new Array();
    var pictureDesc = new Array();
    var pictureDate = new Array();
    
    puppyPics[0] = "AllTheKids.jpg";
    puppyPics[1] = "susie.jpg";
    puppyPics[2] = "princess.jpg";
    puppyPics[3] = "wicketAndCarlos.jpg";
    puppyPics[4] = "wicketAndGeorge.jpg";
    
    pictureDesc[0] = "This is all the new puppies together. They are so cute! I just want to hold them all.";
    pictureDesc[1] = "A friend held Susie up so that you can get a good look at her face. She looks just like her mom.";
    pictureDesc[2] = "This is Princess, she is the same color as her brother Wicket. She loves to just give kisses to everyone who holds her.";
    pictureDesc[3] = "Wicket is a very social puppy. He's not even afraid of Carlos who is my brother's dog.";
    pictureDesc[4] = "Finally, here is Wicket and George. I like how they are starting to play together. They will be running around the yard in no time";
    
    pictureDate[0] = "March 10, 2012";
    pictureDate[1] = "March 10, 2012";
    pictureDate[2] = "March 10, 2012";
    pictureDate[3] = "March 15, 2012";
    pictureDate[4] = "March 15, 2012";
    
    
    for (var puppyPics = 0; puppyPics < 5; puppyPics++) {
    I need to loop through the puppyPics, pictureDesc, and pictureDate arrays while creating table rows that display (in each row), a puppy picture, picture description, and then picture date. Then I have to generate a caption saying how many photos there are now using appropriate array info to get the number. Can anyone help me finishing this script?

  2. #2
    Join Date
    Dec 2012
    Posts
    100
    Code:
    function picDisplay () 
    {
    var puppyPics = [
    {
    	"picture":"AllTheKids.jpg",
    	"description":"This is all the new puppies together. They are so cute! I just want to hold them all.",
    	"date":"March 10, 2012"
    },
    {
    	"picture":"susie.jpg",
    	"description":"A friend held Susie up so that you can get a good look at her face. She looks just like her mom.",
    	"date":"March 10, 2012"
    },
    {
    	"picture":"princess.jpg",
    	"description":"This is Princess, she is the same color as her brother Wicket. She loves to just give kisses to everyone who holds her.",
    	"date":"March 10, 2012"
    },
    {
    	"picture":"wicketAndCarlos.jpg",
    	"description":"Wicket is a very social puppy. He's not even afraid of Carlos who is my brother's dog.",
    	"date":"March 15, 2012"
    },
    {
    	"picture":"wicketAndGeorge.jpg",
    	"description":"Finally, here is Wicket and George. I like how they are starting to play together. They will be running around the yard in no time",
    	"date":"March 15, 2012"
    }
    ];
    var table = document.getElementById('table');
    for (var i = 0; i < puppyPics.length; i++) {
    table.innerHTML += "<tr><td><img src='"+puppyPics[i].picture+"'/></td><td>"+puppyPics[i].description+"</td><td>"+puppyPics[i].date+"</td></tr>";
    }
    }
    picDisplay();
    You can find out how many pictures there are with "puppyPics.length"

  3. #3
    Join Date
    Nov 2012
    Posts
    16
    thank you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles