Posted by: Veer Gorkhali June 16, 2008
Login in to Rate this Post:
0 
? 
?
Thanks CIGG for your help in .js file. The code that I have developed also works for creating tables dynamically and passing single image (same image) to all the cells. But I could not pass different images to the each cells. I mean I want all cells to have a different images not same one. Here is my code, if you can run in your server that would be great. (You need to change the path of the image source.) Let me know if you can help me out. I also tried JS Array but didn't work for me. Thanks for you code and your interest.
HERE IS MY HTML FILE
<html>
<head>
<title>Dynamically Created Table</title>
<script src=d2_thumbnail.js></script>
</head>
<body leftmargin="0" topmargin="0" onload="d2_thumbnail_table()">
</body>
</html>
HERE IS MY .JS FILE: d2_thumbnail.js
function d2_thumbnail_table()
{
// get the reference for the body
var body = document.getElementsByTagName("body")[0];
//default values for the each cell
var DEFAULT_WIDTH = 50;
var DEFAULT_HEIGHT = 50;
var DEFAULT_ROW = 7;
var DEFAULT_COLUMN = 10;
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
// creating all cells
for (var i = 0; i < DEFAULT_ROW; i++)
{
// creates a table row
var row = document.createElement("tr");
for (var j = 0; j < DEFAULT_COLUMN; j++)
{
// Create a <td> element
var cell = document.createElement("td");
cell.height = DEFAULT_HEIGHT;
cell.width = DEFAULT_WIDTH;
cell.innerHTML = "<div style=\"position: absolute; left: 8px; top: 8px\">" +
"<a style=\"color:'#FF0000';\">1</a></div>" +
"<img border=\"0\" src=\"images/small_2d_images/001.jpg\" width= \"70\" height= \"70\">";
row.appendChild(cell);
}
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 1;
tbl.setAttribute("border", "1");
}
HERE IS MY HTML FILE
<html>
<head>
<title>Dynamically Created Table</title>
<script src=d2_thumbnail.js></script>
</head>
<body leftmargin="0" topmargin="0" onload="d2_thumbnail_table()">
</body>
</html>
HERE IS MY .JS FILE: d2_thumbnail.js
function d2_thumbnail_table()
{
// get the reference for the body
var body = document.getElementsByTagName("body")[0];
//default values for the each cell
var DEFAULT_WIDTH = 50;
var DEFAULT_HEIGHT = 50;
var DEFAULT_ROW = 7;
var DEFAULT_COLUMN = 10;
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
// creating all cells
for (var i = 0; i < DEFAULT_ROW; i++)
{
// creates a table row
var row = document.createElement("tr");
for (var j = 0; j < DEFAULT_COLUMN; j++)
{
// Create a <td> element
var cell = document.createElement("td");
cell.height = DEFAULT_HEIGHT;
cell.width = DEFAULT_WIDTH;
cell.innerHTML = "<div style=\"position: absolute; left: 8px; top: 8px\">" +
"<a style=\"color:'#FF0000';\">1</a></div>" +
"<img border=\"0\" src=\"images/small_2d_images/001.jpg\" width= \"70\" height= \"70\">";
row.appendChild(cell);
}
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 1;
tbl.setAttribute("border", "1");
}