Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Loop code to dynamically build HTML table

Posted on 2010-08-23
3
Medium Priority
?
566 Views
Last Modified: 2013-11-18
I would like to create a loop instead of repeating the blocks of code shown below.

Can someone show me how to use the loop index in the variable names and cell indices?

Thanks.
var cell1 = row.insertCell(0);
	var element1 = document.createElement("img");
	element1.src = imagePath + "1_tn.jpg";
	cell1.appendChild(element1);

	var cell2 = row.insertCell(1);
	var element2 = document.createElement("img");
	element2.src = imagePath + "2_tn.jpg";
	cell2.appendChild(element2);

	var cell3 = row.insertCell(2);
	var element3 = document.createElement("img");
	element3.src = imagePath + "3_tn.jpg";
	cell3.appendChild(element3);

	var cell4 = row.insertCell(3);
	var element4 = document.createElement("img");
	element4.src = imagePath + "4_tn.jpg";
	cell4.appendChild(element4);

        --ETC--

Open in new window

0
Comment
Question by:sailing_12
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 4

Accepted Solution

by:
gzmogk earned 1200 total points
ID: 33507668
try using an array for the variables

var cells = new Array();
var elements = new Array();

run a for loop to run it as many times you want

for(i=0;i<NUMBER_REQUIRED;i==0{
cells[i] = row.insertCell(0);
elements[i] = document.createElement("img");
      elements[i].src = imagePath + (i+1)+"_tn.jpg";//since i starts from 0 and you require 1, hence (i+1);
      cells[i].appendChild(elements[i]);

}

hope this helps
0
 

Author Comment

by:sailing_12
ID: 33507843
I realized I don't really need them.
function addRow(rowNum){
	var table = document.getElementById('gallery');

	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);


	for(c=0; c<7; c++){
		var cell = row.insertCell(c);
		var element = document.createElement("img");
		var imageNum = c + 1;
		element.src = imagePath + "/thumbs/" + imageNum + "_tn.jpg";
		cell.appendChild(element);
	}


}

Open in new window

0
 

Author Closing Comment

by:sailing_12
ID: 33507852
Found even better solution.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Before we dive into the marketing strategies involved with creating an effective homepage, it’s crucial that EE members know what a homepage is. In essence, a homepage is the introductory, or default page, of a website that typically highlights the …
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question