Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Trying to change the wording in a cell without loading a different table

    Hi everyone,

    Is it possible to change the content of a table's cells displaying labels, i.e.

    <td>initial text</td>

    to

    <td>final text</td>,

    by letting the user click on a button, which would call a function to write to that particular cell. I know this is not a problem with a textbox such as <td><input type="text" name="a_name" etc.><td>.

    I am trying to avoid having to load another page displaying a different table with the "final text".

    Thanks.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Dieter Rausch,

    Here is an example for your appraisal
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta content="mshtml 6.00.2800.1264" name="generator" />
    <title>Inner HTML</title>
    <style type="text/css">
     /*<![CDATA[*/
    body{background-color:#aaaaff;}
    #dvone{position:absolute;top:5%;left:2%;}
    #dvtwo{position:absolute;top:5%;left:25%;}
    button{width:100px;border: solid 2px #000000;margin:2px;}
    #tbltone{border: solid 1px #000000;background-color:#ffffff;}
    #information{width:200px;height:200px;border: solid 1px #000000;text-align:center;}
    #dvthree{width:200px;height:200px;padding:10px;overflow:auto;}
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    function clearcell()
    {
    document.getElementById("information").innerHTML ='<div id="dvthree">This cell opens onload.<br /> If required you can leave this blank . As you will see scrollbars will appear automatically.</div>';
    }
    function first_text()
    {
    document.getElementById("information").innerHTML ='<div id="dvthree">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. <br /><a href="#"onclick="javascript:clearcell()">close</a></div>';
    }
    function second_text()
    {
    document.getElementById("information").innerHTML ='<div id="dvthree">Here is some more text.<br /><a href="#"onclick="javascript:clearcell()">close</a></div>';
    }
    function third_text()
    {
    document.getElementById("information").innerHTML ='<div id="dvthree">You can also use images.<br />This is an image<br /><img src="an_image.jpg"alt=""/><br /><a href="#"onclick="javascript:clearcell()">close</a></td>';
    }
    //]]>
    </script>
    </head>
    
    <body onload="clearcell();">
    
    <div id="dvone">
    <button onclick="first_text()"> Lorem </button><br />
    <button onclick="second_text()" > More text </button><br />
    <button onclick="third_text()"  >An image </button>
    </div>
    
    <div id="dvtwo">
    <table id="tbltone"><tr>
    <td id="information"></td>
    </tr></table>
    </div>
    
    </body>
    </html>
    I am sorry about the width of this post but...
    the innerHTML needs to be on one line

    cthead

  • #3
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am sorry about the width of this post but...
    the innerHTML needs to be on one line
    No it doesn't, concatenate the string:
    Code:
    var s = 'This' + 
    'Is' + 
    'A' +
    'Test';
    document.write(s);
    gives 'This is a test' in the source as well as after parsing (in the browser).
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #4
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi coothead,

    Fantastic! Your code privided the keywords such as "document.getElementsById" and "innerHTML" which allowed me to search for explanations and eventually get my code to work. Here are some interesting observations I made:

    Initally I used a table for my project and the code worked. Then I found that using a form gave me much better control over the positioning and sizing of buttons. However, all the previously entered text disappeared on clicking one of the buttons, as if an empty form was loaded again. Then I noticed in your code the use of the <div> tag. So I changed <form> to <div> and suddenly the problem was solved. I hardly know anything about the <div> tag and have to do some searching. In any case thank you very much.

    The next question is for me'. I tried to apply your suggestion to coothead's code but could not get it to display the variable s in the right place. Any suggestions as to how this should be coded?

    document.getElementById("information").innerHTML ='<div id="dvthree"> ? <div>.

    Thanks
    Dieter

  • #5
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Right, coothead's code edited:
    Code:
    function clearcell()
    {
    document.getElementById("information").innerHTML ='<div id="dvthree">'+
      'This cell opens onload.<br /> If required you can leave this blank.'+
      'As you will see scrollbars will appear automatically.</div>';
    }
    function first_text()
    {
    document.getElementById("information").innerHTML =
      '<div id="dvthree">Lorem ipsum dolor sit amet, consectetuer'+
      'adipiscing elit. Praesent blandit venenatis purus. Integer massa'+
      'libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent'+
      ' taciti sociosqu ad litora torquent per conubia nostra, per inceptos'+
      'hymenaeos. Suspendisse potenti. <br /><a href="#"onclick="java'+ 'script:clearcell()">close</a></div>';
    }
    
    function second_text()
    {
    document.getElementById("information").innerHTML ='<div id="dvthree">'+
      'Here is some more text.<br /><a href="#"onclick="java '+
      'script:clearcell()">close</a></div>';
    }
    function third_text()
    {
    document.getElementById("information").innerHTML =
      '<div id="dvthree">You can also use images.<br />This is an'+
      'image<br /><img src="an_image.jpg"alt=""/><br /><a '+
      'href="#"onclick="java script:clearcell()">close</a></td>';
    }
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #6
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks me',

    I tried assigning the string to a variable and then displaying the variable, which was not successful.
    Your answer shows an easier and perhaps the only way.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •