[Javascript] DHTML and table cells

Tue Sep 25 09:50:45 CDT 2001

I have a bit of DHTML which writes different text to the screen based on
which radio button is chosen. It works to a point, in that it does write.
But is there any way to make the text write to a table cell? I have the
named divs set up inside a table cell, but it just writes outside the
table. While my Javascript is pretty good, my DHTML is not terribly
developed, so I'd appreciate any help.

I've looked back at the list archives, but most examples I've seen have
involved absolutely positioned elements (for Netscape). Because my form is
dynamically generated by Domino, there's no way to absolutely position form
elements, which is why I want to write to a table cell. This needs to be
not only cross-browser (4.0+ only), but also cross-platform.

Thanks in advance,

Esther
(here's the code so far:)

 <SCRIPT LANGUAGE="JavaScript">    //Define global variables
     var totalLayersInLoop=4;
     var layerNumShowing=0;

     function init(){
            if (navigator.appName == "Netscape") {
              layerStyleRef="layer.";
               layerRef="document.layers";
               styleSwitch="";
               }else{
               layerStyleRef="layer.style.";
               layerRef="document.all";
               styleSwitch=".style";
               }    }

     function showLayerNumber(number){
          var layerNumToShow=number;
          hideLayer(eval('"layer' + layerNumShowing+'"'));
          showLayer(eval('"layer' + layerNumToShow+'"'));
          layerNumShowing=layerNumToShow;          }

     function showLayer(layerName){
          eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility
="visible"');  }

     function hideLayer(layerName){
          eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility
="hidden"');   }

 </SCRIPT>

 <STYLE TYPE="text/css">
 #layer0 {POSITION: absolute; Z-INDEX: 10; VISIBILITY: visible;}
 #layer1 {POSITION: absolute; Z-INDEX: 20; VISIBILITY: hidden; }
 #layer2 {POSITION: absolute; Z-INDEX: 30; VISIBILITY: hidden; }
 #layer3 {POSITION: absolute; Z-INDEX: 40; VISIBILITY: hidden; }
 #loopControls {POSITION: absolute; Z-INDEX: 50; VISIBILITY: visible; }
  </STYLE>

  </HEAD>

 <BODY onLoad="init()">  <!--layers in the loop-->
<form>
<table border=1>
<tr><td>
<INPUT TYPE=radio NAME="ArtType" VALUE="Stock" onClick
="showLayerNumber(1)">Stock
<INPUT TYPE=radio NAME="ArtType" VALUE="Commissioned Illustration" onClick
="showLayerNumber(2)">Commissioned Illustration
<INPUT TYPE=radio NAME="ArtType" VALUE="Assignment Photography" onClick
="showLayerNumber(3)">Assignment Photography
</td></tr>

<TR VALIGN=top>
<TD  valign=top>
<a name="usage"><B>Usage ID Info:</B></a>
</TD></TR>

<tr><td>
<!--layer 0-->
<DIV ID="layer0" >
 <font face="Arial" color="red">&nbsp;</font>
 </DIV>
<!--layer 1-->
<DIV ID="layer1" >
 <font face="Arial" color="red">Fields 1, 2, 3</font>
 </DIV>
<!--layer 2-->
<DIV ID="layer2" >
 <font face="Arial" color="red">Fields 4, 5, 6</font>
 </DIV>
<!--layer 3-->
<DIV ID="layer3" >
 <font face="Arial" color="red">Fields 7, 8, 9</font>
 </DIV>
</td></tr>
</table>
 </form>