Dynamically Changing the content of a table cell

asdasd · February 16th, 2005, 05:24 PM

I want to dynamically change the content of a table cell.

Right now I am able to change the content using innerText property.

But I have a cell which has a link in it. I want to dynamically change
the name on the link. In this case innerText would remove the link property and put a plain text in the cell.

I tried using innerHtml , it didnt change anything at all...

Portions of my code...
some parameters in the innerhtml are dynamic and they are all having valid values.

var htmltxt = '<a href="javascript:OpenDetailsPage(' + "'" +
                configid + "'" + ');">' +
             argsret[0].toString() + ' </a>';

alert(htmltxt);

// cell.innerText = argsret[0].toString() ;
    cell.innerHtml = htmltxt;
    row.cells[c+1].innerText = argsret[1].toString();

cell and row are the current row and cell objects.

Lrnmore · February 17th, 2005, 10:20 AM

Hi asdasd,

I tested this is IE6 and FF, seems you can use innerHTML on these browsers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<script type="text/javascript">
var myLinks = ["http://www.google.com", "http://www.yahoo.com"];
var myTexts = ["Google", "Yahoo"];
var k = 0;

function chgLink(x)
{
k = (k == 2)? 0 : k;
var el = document.getElementById(x);
el.innerHTML = myTexts[k];
el.title = myTexts[k];
el.href = myLinks[k];
k++;
}
</script>
</head><body>
<table border="1">
<tr><td>
<a id="1" href="">Test</a>
</td></tr>
</table>
<form>
<input type="button" onclick="chgLink(1)" value="Test Change">
</form></body></html>

HTH

HTH
Lrnmore

asdasd · February 17th, 2005, 05:20 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<script type="text/javascript">
var myLinks = ["http://www.google.com", "http://www.yahoo.com"];
var myTexts = ["Google", "Yahoo"];
var k = 0;

function chgLink(x)
{
k = (k == 2)? 0 : k;
var el = document.getElementById('ta');
alert(el.rows[0].cells[0].innerHTML);
alert(el.rows[0].cells[0].title);
alert(el.rows[0].cells[0].href);
el.rows[0].cells[0].innerHTML = myTexts[k];
el.rows[0].cells[0].title = myTexts[k];
el.rows[0].cells[0].href = myLinks[k];
k++;
}
</script>
</head><body>
<table border="1" id="ta">
<tr><td>
<a id="1" href="">Test</a>
</td></tr>
</table>
<form>
<input type="button" onclick="chgLink(1)" value="Test Change">
</form></body></html>

Thanks for you reply, I tried your code it works, but if there is no Id for the link element, and if I want to change it through the table ID, it is not working.

I have pasted the modified code, Can you pls check and tell me why its not working now..

Using IE6 only

Lrnmore · February 17th, 2005, 07:50 PM

asdasd,

This page has 2 buttons, maybe you can spot why innerHTML didn't work for you
before.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<script type="text/javascript">
var myLinks = ["http://www.google.com", "http://www.yahoo.com"];
var myTexts = ["Google", "Yahoo"];
var k = 0;

function chgLink(x)
{
k = (k == 2)? 0 : k;
var elTab = document.getElementById('ta');
var elLink = document.getElementById(x);
alert(elTab.rows[0].cells[0].innerHTML);
elLink.innerHTML = myTexts[k];
elLink.title = myTexts[k];
elLink.href = myLinks[k];
k++;
}

function chgCell(){
var html = '<a href="http://www.msn.com">MSN</a>';
var elTab = document.getElementById('ta');
elTab.rows[1].cells[0].innerHTML = html;
}

</script>
</head><body>
<table border="1" id="ta">
<tr><td>
<a id="1" href="">Test</a>
</td></tr>
<tr><td>
test
</td></tr>
</table>
<form>
<input type="button" onclick="chgLink(1)" value="Test ChangeA">
<input type="button" onclick="chgCell()" value="Test ChangeB">
</form></body></html>

HTH
Lrnmore

asdasd · February 18th, 2005, 01:44 PM

var htmltxt ='<a href="javascript:OpenDetailsPage(' + "'" + configid + "'" + ');">' +
argsret[1].toString() + ' </a> ' ;

var htmlvar = cell.innerHTML;
cell.innerHTML = htmltxt;

It worked if I use cell object directly. TABLe.row.cell didnt work.
TABLE doesnt support inner html , maybe its due to that..

Thanks for your help...