Using the dom to dynamically build a table with hyperlinks

[john_williams_800]

Hi;

I am just starting to use the DOM to do some more advanced
javascripting so please be patient with my question if it is an
ignorant question.

I would like to use the DOM to dynamically create an html table via
javascript. While that table is being dynamically created in a
javascript function I would like to dynamically insert text and a
hyperlink with an image into each cell.

I got pretty far on my own. I was able to dynamically create a table
and insert a string into each cell. However, I was not able to use
the DOM to insert a hyperlink into each cell. I tried adding it as a
new text node and got the text of a link rather then a link. I then
tried adding and setting an anchor element but I got nothing.

An example of how to add an image that is a link to a table cell using
the dom would be much appreciated.

Below is the code that I tried that did not work.

Any insights appreciated.

Thanks

//-------------------------------------------------------------------------------
// get a <div> off of the page, insert a 3x3 <table> into it with the
word
// "text" and a link to google in each cell
function doTable()
{
var d = document;
var table;
var tbody;
var row;
var cell;
var msg = "text";
var link;
var celltext;
var div;

// Get table off of page
div = d.getElementById("d1");
table = d.createElement("table");
tbody = d.createElement("tbody");

// 3 x 3 table
// Make a row
for (var r = 0; r < 3; r++) {
row = d.createElement("tr");

// make cells for row
for (var c = 0; c < 3; c++) {
cell = d.createElement("td");

// insert "text" into each cell
celltext = d.createTextNode(msg);
cell.appendChild(celltext);

// insert a link to google in each cell
link = d.createElement("a");
link.name = "google";
link.href = "http://www.google.com";
cell.appendChild(link);

// put cell into row
row.appendChild(cell);
}
tbody.appendChild(row);

}

table.appendChild(tbody);
table.setAttribute("border","2");
div.appendChild(table);



}// end function doTable()
//--------------------------------------------------------------------------

 

[lallous]

This modification should work:

cell = d.createElement("td");

// insert "text" into each cell
celltext = d.createTextNode(msg);

// insert a link to google in each cell
link = d.createElement("a");
link.name = "google";
link.href = "http://www.google.com";
link.appendChild(celltext); // <---
cell.appendChild(link);

// put cell into row
row.appendChild(cell);

Regards,
Elias

 

[john_williams_800]

Hi Elias;

That helped get me much closer to where I want to go, but I am still
not there.

What I want to do is create a table with 3 rows and 3 cells.

Each cell has a text message with a hyperlink to the right of the
message. The hyperlink is labeled with an image instead of text;

myStringInTheCellBeforeALink myLinkWithAnImage

Using your example I got the link with the image into each cell ( yay!
), but I can't seem to put a text message to the left of it.

Below is the code I am using.

Any help or examples would be appreciated.

Thanks

Steve

//-------------------------------------------------------------------------------
// get a <div> off of the page, insert a 3x3 <table> into it. Each
cell has
// a string followed by a hyperlink that uses an image
function doTable()
{
var d = document;
var table;
var tbody;
var row;
var cell;
var link;
var div;
var imgForLink;

// Get table off of page
div = d.getElementById("d1");
table = d.createElement("table");
tbody = d.createElement("tbody");

// 3 x 3 table
// Make a row
for (var r = 0; r < 3; r++) {
row = d.createElement("tr");

// make cells for row
for (var c = 0; c < 3; c++) {
cell = d.createElement("td");

imgForLink = d.createElement("img");
imgForLink.src = "rc.jpg";

// insert a link to google in each cell
link = d.createElement("a");
link.name = "google";
link.href = "http://www.google.com";

//Label the link with an image
link.appendChild(imgForLink);

// Put a text message to the left of the image
link.insertAdjacentText("BeforeBegin", "text string before
link");

// Shove it all into a cell
cell.appendChild(link);


// put cell into row
row.appendChild(cell);
}
tbody.appendChild(row);

}

table.appendChild(tbody);
table.setAttribute("border","2");
div.appendChild(table);



}// end function doTable()

 

[Martin Honnen]

//Label the link with an image
link.appendChild(imgForLink);

// Put a text message to the left of the image
link.insertAdjacentText("BeforeBegin", "text string before
link");

You need to insert the text first e.g.
link.appendChild(document.createTextNode("text goes here"));
then insert the image e.g.
link.appendChild(imgForLink);
That way the link has two child nodes, a text node and the <img> element
node.

Or perhaps you want the cell to contain two child nodes, a text node and
the link with the image element node, then you need
cell.appendChild(document.createTextNode("text goes here"));
cell.appendChild(link);

Other approaches are possible but if you build the whole stuff from
scratch then it is usually easiest to simply use appendChild calls in
the order you want to have the child nodes.

 

[john_williams_800]

Thats it!

Martin, thanks so much for your help.

You mentioned that there would be a better way if I would do it from
scratch.

How would you do it?

This is all new to me so I wouldn't mind having a look at a better way.

Thanks again!

 

[Martin Honnen]

You mentioned that there would be a better way if I would do it from
scratch.

No, what I suggested with appendChild is in my view the easiest way if
you build the whole DOM from scratch. But the DOM has other methods like
insertBefore which could help to insert nodes at a certain position
between or before other nodes.