Solved

Loop code to dynamically build HTML table

Posted on 2010-08-23
3
563 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
  • 2
3 Comments
 
LVL 4

Accepted Solution

by:
gzmogk earned 400 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

733 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