Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 567
  • Last Modified:

Loop code to dynamically build HTML table

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
sailing_12
Asked:
sailing_12
  • 2
1 Solution
 
gzmogkCommented:
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
 
sailing_12Author Commented:
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
 
sailing_12Author Commented:
Found even better solution.
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now