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

Dieter Rausch · 01-06-2004, 03:37 PM

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.

coothead · 01-06-2004, 06:52 PM

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

me' · 01-06-2004, 07:42 PM

Quote:

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).

Dieter Rausch · 01-07-2004, 04:07 PM

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

me' · 01-07-2004, 07:08 PM

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>';
}

Dieter Rausch · 01-07-2004, 07:49 PM

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.