JavaScript: change text in a table cell

Discussion in 'Programming' started by misho, Aug 17, 2007.

to remove all ads.
  1. misho

    misho New Member

    Messages:
    11
    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?
     
  2. eaglesfreak

    eaglesfreak New Member

    Messages:
    6
    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.
     
  3. jeverd01

    jeverd01 New Member

    Messages:
    19
    <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: Aug 19, 2007
  4. misho

    misho New Member

    Messages:
    11
    Thanks a lot! Worked great! :) I didn't know about the innerHTML property...
     
  5. puritys

    puritys New Member

    Messages:
    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.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>
     

Share This Page