JavaScript: change text in a table cell

misho · 08-17-2007, 09:01 PM

Let's say I have a page like this:

Code:

<html><body>
<table border="1"><tr>
    <td>
        left cell
    </td>
    <td>
        right cell
    </td>
</tr></table>
<a href="javascript:something()">Change Text</a>
</body></html>

What would I have to do in order to modify the text inside each of those cells when the link is clicked, using JavaScript, without reloading the entire page?

eaglesfreak · 08-18-2007, 08:16 PM

Try this out

HTML Code:

<html>

<head>

<title>TEST</title> 

<style type="text/css"> #text0{display:none;} h5.textHead{cursor:pointer;cursor:hand/*IE*/;} 
</style> 

<script> 
function togDisplay(id){  var style = document.getElementById(id).style;  style.display= (style.display=="block")  ? "none":"block"; } 
</script> 

</head> 

<body> 

<table>  

<tr>  

<td>  <h5 class="textHead" onclick="togDisplay('text0')">title of row</h5>  <div id="text0">long paragraph of text goes here</div>  
</td>  

</tr>

</table> 

</body> 

</html>

For each new one, add a number to the #text0 (i.e. #text1, #text2, etc...)

this probaly isn't exactly what your looking for, but if you play around with it you should be able to make it suit your needs.

jeverd01 · 08-19-2007, 07:29 AM

<html>

<head>
<script language="javascript">
function something(){
document.getElementById("cell_1").innerHTML = "Text modified in the first cell"
document.getElementById("cell_2").innerHTML = "Text modified in the second cell"

}
</script>

</head>

<body>
<table border="1"><tr>
<td id="cell_1">
left cell
</td>
<td id="cell_2">
right cell
</td>
</tr></table>
<a href="javascript:something()">Change Text</a>
</body></html>

Real simple straight forward way. Anyways you can modify more then text there you can even add html. Remember to use single quotes for any html added inside of javascript. Also \ any javascript langauge specific charecters.

misho · 08-19-2007, 06:58 PM

Thanks a lot! Worked great!

I didn't know about the innerHTML property...

puritys · 10-07-2007, 08:09 PM

if you want to change event td tag.you can use method of getElementsBytagName.

<table border="1" id="mytable">
<tr><td>
left cell
</td>
<td>
right cell
</td></tr>
<tr><td>left cell</td><td>right cell</td></tr></table>
<a href="javascript:go()">Change Text</a>

<script>
function go(){
var k=document.getElementsByTagName('table');

for(i=0;i<k.length;i++){
if(k[i].id=="mytable"){
var tbody=k[i].childNodes[0];
for(p=0;p<tbody.childNodes.length;p++){
tr=tbody.childNodes[p];
for(j=0;j<tr.childNodes.length;j++){
tr.childNodes[j].firstChild.nodeValue+="1";
}
}
}
}

}
</script>

08-17-2007, 09:01 PM	#1 (permalink)
misho New Member Join Date: Mar 2007 Posts: 11	JavaScript: change text in a table cell Let's say I have a page like this: Code: <html><body> <table border="1"><tr> <td> left cell </td> <td> right cell </td> </tr></table> <a href="javascript:something()">Change Text</a> </body></html> What would I have to do in order to modify the text inside each of those cells when the link is clicked, using JavaScript, without reloading the entire page? __________________ - Misho

08-19-2007, 07:29 AM	#3 (permalink)
jeverd01 New Member Join Date: Aug 2007 Posts: 14	<html> <head> <script language="javascript"> function something(){ document.getElementById("cell_1").innerHTML = "Text modified in the first cell" document.getElementById("cell_2").innerHTML = "Text modified in the second cell" } </script> </head> <body> <table border="1"><tr> <td id="cell_1"> left cell </td> <td id="cell_2"> right cell </td> </tr></table> <a href="javascript:something()">Change Text</a> </body></html> Real simple straight forward way. Anyways you can modify more then text there you can even add html. Remember to use single quotes for any html added inside of javascript. Also \ any javascript langauge specific charecters. Last edited by jeverd01; 08-19-2007 at 07:37 AM. Reason: Better solution

08-19-2007, 06:58 PM	#4 (permalink)
misho New Member Join Date: Mar 2007 Posts: 11	Thanks a lot! Worked great! I didn't know about the innerHTML property... __________________ - Misho

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

10-07-2007, 08:09 PM	#5 (permalink)
puritys New Member Join Date: Sep 2007 Posts: 3	if you want to change event td tag.you can use method of getElementsBytagName. <table border="1" id="mytable"> <tr><td> left cell </td> <td> right cell </td></tr> <tr><td>left cell</td><td>right cell</td></tr></table> <a href="javascript:go()">Change Text</a> <script> function go(){ var k=document.getElementsByTagName('table'); for(i=0;i<k.length;i++){ if(k[i].id=="mytable"){ var tbody=k[i].childNodes[0]; for(p=0;p<tbody.childNodes.length;p++){ tr=tbody.childNodes[p]; for(j=0;j<tr.childNodes.length;j++){ tr.childNodes[j].firstChild.nodeValue+="1"; } } } } } </script>