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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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 ( has made its way into the popular lexicon of the English language.  A few years ago, …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

828 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