Loop code to dynamically build HTML table

Posted on 2010-08-23
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?

var cell1 = row.insertCell(0);

	var element1 = document.createElement("img");

	element1.src = imagePath + "1_tn.jpg";


	var cell2 = row.insertCell(1);

	var element2 = document.createElement("img");

	element2.src = imagePath + "2_tn.jpg";


	var cell3 = row.insertCell(2);

	var element3 = document.createElement("img");

	element3.src = imagePath + "3_tn.jpg";


	var cell4 = row.insertCell(3);

	var element4 = document.createElement("img");

	element4.src = imagePath + "4_tn.jpg";



Open in new window

Question by:sailing_12
  • 2

Accepted Solution

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

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


hope this helps

Author Comment

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




Open in new window


Author Closing Comment

ID: 33507852
Found even better solution.

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

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…
I made this because I wanted to get e-mail with a attached csv file so I'd would be able to import user input into a MS Excel template, but I also wanted to register/save all inputs from each day in a file on the server. 1st - It creates a temp C…
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…

910 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now