JavaScript: change text in a table cell

M

misho

New Member
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?
 
E

eaglesfreak

New Member
Try this out


HTML: 
<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.
 
J

jeverd01

New Member
<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:
P

puritys

New Member
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.id=="mytable"){
var tbody=k.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>
 
You must log in or register to reply here.
Top