Hey guys, I need some help in creating tables dynamically using Java Script and displaying different images in each cells of the tables dynamically. Need help............. Nessesitas Aayuda.............Maddat chahiyo........Thanks.

Research on "innerhtml". Give some more details so I can try to help you.

Cowboys,

I have created the table dynamically using Java Script but I don't know how to pass an image to each cell of the table. I need a code that I can use inside .js file, so that I can pass an image to each cell of the table dynamically. If you could help me just let me know. If you need a code that I have developed, I can send it to you.

.

Doesn't innerhtml allow you html tags within? If so, cant you simply put on <img> tags to retrieve image data?

sth sort of :

var imgHtml ="<img src='http://www.myweb.com/myimage.jpg'>";
document.....innerHTML = imgHTML;

Btw, i had similar problems when i was developing a Google Desktop Gadget. I had to play tricks as the engine didnt allow embedding html into the gadget UI.

havent  worked much on UI side...but yeah innerhtml should do the job, another option could be using DIV.

when you are creating the dynamic table, pass the image along with the other values. The tag is <img src="image source"/>
If you have to add an image after the table is created, I am not sure about putting ids on the <td>, but, you ca create the column for image like <td><span id="imageHolder"></span></td> and then populate the inner html for the span with the image. Try using the same thing without the span and putting the id for the <td id="some Id"> and see if you can populate it with the image at a later time.

Hope this helps. If not,
send me an email with your code. Will see from there.

Cowboys, it seems like you live in Irving area or definitely in Dallas. Anyway can you give me your email so that I can send you my code. I am having difficult time with the Java Script. Thanks.

Just like the table should have an id that you are using to refer the table from javascript, each td should also have an id.

Id you are creating the table dynamically then you should generate a dynamic id for each TD too. Once each td has its own ID. You can juse Javascript to refer to a particular TD using that Id. Lets say you assign a td an id 'TD1'. then in javascript to get that particular TD the code would be:

var td1 = document.getElementById('td1');

then,

td1.innerHtml = "<img src='http://www.myweb.com/myimage.jpg'>";

 

CIGG this his what my .js file looks like this. And help me in this code. Thanks.

    function d2_thumbnail_table()
    {
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];

        //default values for each cell
        var DEFAULT_WIDTH = 70;
        var DEFAULT_HEIGHT = 70;  
        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;
              
                var cellText = document.createTextNode("Row "+i+", Column "+j);
                //var cellImage = "<img src='images/small_2d_images/001.jpg'>";

                cell.appendChild(cellText);
              
                cell.style.background = "rgb(50,250,50)";
                //cell.style.background = "<img src=\"images/small_2d_images/001.jpg\">";
               
                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 the code: There are two files one html file and one js file

THE CODE BELOW GOES TO HTML FILE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Untitled Page</title>

<script language="javascript" type="text/javascript" src="TableScript.js"></script>

</head>

<body style="font-size: 8pt; font-family: Verdana, Arial" text="#000000">

<table border="0" cellpadding="3" cellspacing="3" width="60%">

<tr>

<td colspan="3">

&nbsp; &nbsp;&nbsp; <strong>

Create Table:</strong></td>

</tr>

<tr>

<td align="right" style="width: 40%">

Number of Rows:

</td>

<td colspan="2">

<input id="tdRows" size="5" type="text" maxlength="2" /></td>

</tr>

<tr>

<td align="right" style="width: 40%; height: 19px">

Number of Columns:</td>

<td colspan="2" style="height: 19px">

<input id="tdCols" size="5" type="text" maxlength="2" /></td>

</tr>

<tr>

<td align="right" style="width: 40%; height: 19px">

</td>

<td colspan="2" style="height: 19px">

<input id="btnGenerateTable" type="button" value="Generate Table" onclick="generateTable();" /></td>

</tr>

</table>

<div id="tableHolder" style="width: 100%">

</div>

<div id="Div1" style="display:none; visibility:hidden;width: 100%">

<input id="File1" type="file" /></div>

</body>

</html>

 

THE CODE BELOW GOES TO A JS FILE, FILE NAME SHOULD BE: TableScript.js

function generateTable()

{

var tableHolder = document.getElementById("tableHolder");

tableHolder.innerHTML = "";

var tdRows = document.getElementById("tdRows");

var tdColumns = document.getElementById("tdCols");

if(tdRows.value!="" && tdColumns.Value!="")

{

// creates a <table> element and a <tbody> element

var tbl = document.createElement("table");

tbl.setAttribute("width", "60%");

tbl.setAttribute("id", "dynamicTable");

var tblBody = document.createElement("tbody");

tbl.setAttribute("border", "1pt outset #CCC");

tbl.setAttribute("cellpadding", "3");

tbl.setAttribute("cellspacing", "3");

tbl.setAttribute("border-collapse", "collapse");

// creating all cells

for (var i = 0; i < tdRows.value; i++) {

// creates a table row

var row = document.createElement("tr");

for (var j = 0; j < tdColumns.value; j++) {

// Create a <td> element

var cell = document.createElement("td");

cell.style.background = "rgb(240,240,240)";

cell.setAttribute("align", "center");

cell.setAttribute("height", "15pt");

cell.setAttribute("id", "tbl"+i+j);

cell.innerText = cell.id+ ": Click Me";

cell.onclick = function (evt) { setElement(this);};

cell.style.cursor="hand";

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 <div>

tableHolder.appendChild(tbl);

}

}

function setElement(td)

{

document.getElementById("File1").click();

if(document.getElementById("File1").value!=null)

{

td.innerHTML = "<img src='"+document.getElementById("File1").value+"'>";

document.getElementById("File1").value="";

}

}

JQuery will make this much easier.

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