Create link in an html table with javascript.

Question

I am using the following code to add columns dynamically to a html table:

var tblHeadObj = window.opener.document.getElementById("maintable").tHead;
var j=0;
while(j < fname.length)
{ 
  if(tblHeadObj != null) 
  {
    for(var h = 0; h < tblHeadObj.rows.length; h++) 
    {
      var newTH = window.opener.document.createElement('th');

      tblHeadObj.rows[h].appendChild(newTH);
      //newTH.innerHTML='[th]row:'+h+'cell:'+(tblHeadObj.rows[h].cells.length-1)
    }
  }
  var tblBodyObj = window.opener.document.getElementById("maintable").tBodies[0];
  //for(var i = 0; i < tblBodyObj.rows.length; i++) {
  var newCell=tblBodyObj.rows[0].insertCell(-1);
  var newCell=tblBodyObj.rows[0].insertCell(-1);
  // newCell.innerHTML = (tblBodyObj.rows[0].cells.length - 1)
  newCell.innerHTML=  fname[j];
  j++;
}

Now i want to make columns as link.How can i do that?

Thanks

Answer 1

If you're trying to put the cell contents into an anchor, then one way is to change

newCell.innerHTML=  fname[j];

to

newCell.innerHTML=  '<a href="'+whatever+'">'+fname[j]+'</a>';

where whatever is a variable holding an appropriate string.

Beware that the contents of fname[j] are all inline (eg, not tables or blocks like div, headings, forms -- but form inputs are okay) or the anchor will be closed by most browsers prematurely. If need be, you could put the anchor only around parts of the cell's contents, but the easiest way to do that would depend on what the contents are.

Answer 2

As others have noted, it is quite unclear what you mean by "make columns as link". However, we as a community have become accustomed to making guesses about the real problem and providing a solution based on that assumption. As we gain experience tackling more and more unclear questions, our ESP skill become more honed.

It appears that you are creating an HTML table via DOM methods. I will assume that you want to create a link within the created tablecell and here is my suggestion:

Use the same createElement method to create any elements you need. For instance, a link (anchor) can be created with the following code:

var link = document.createElement("a");
link.setAttribute("href", "http://www.microsoft.com")
link.className = "someCSSclass";
// For IE only, you can simply set the innerText of the node.
// The below code, however, should work on all browsers.
var linkText = document.createTextNode("Click me");
link.appendChild(linkText);

// Add the link to the previously created TableCell.
newCell.appendChild(link);

Alternatively, you can also set the innerHTML of the TableCell as @Anonymous has suggested.

Answer 3

This are all good but I needed an image in the link so here is that code:

  cell[k] = document.createElement('td');
   var link = document.createElement('a');
            link.setAttribute('href', "http://www.ilovethismusic.com");
            link.setAttribute('target', "_blank");

            var newimg = document.createElement('img');
            newimg.src = "http://www.ilovethismusic.com/Views/Images/bg_header.jpg";
            newimg.alt = "imageMissing";
            newimg.width = "95";
            newimg.height = "45";
            newimg.border = "0";

            link.appendChild(newimg);




        cell[k].appendChild(link);