Hiding text in a table 1

Tony32 · Oct 25, 2001

I'm a mainframe programmer who has just started this week teaching myself ASP and JavaScript. I have been set a small challenge but am struggling!!

I have populated a table from the Access Northwinds database which consists of 11 rows and three columns, but of course it could be any number of rows if it was a different database. My task is that a mouseover event on any column within one row of the table is to reveal additional data in another table. When the mouse moves away the data is to be hidden again. So far I have managed to populate both tables but unable to hide the data in the second table or code the mouseover event.

Any help or advise would be greatly appreciated.

Tony X-)

Mighty · Oct 25, 2001

Do you want to hide the whole table?
Just set the display style property.

<TABLE ID="myTable" STYLE="display: none">

then on the mouseover event, make it visible

onmouseover="myTable.style.display='inline'"

Or

onmouseover="myTable.style.display='block'"
Mise Le Meas,

Mighty

shaddow · Oct 25, 2001

Here is an example:

Code:

<HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE></TITLE> <script language="javascript"> function show(el,tblcell,txt) { var cel=document.all.item(tblcell); cel.innerText=txt; }; function hide(el,tblcell) { var cel=document.all.item(tblcell); cel.innerText=''; }; </script> </HEAD> <BODY> <table border=1> <tr> <td> <p onmouseover="show(this,'t1','Your Text');" onmouseout="hide(this,'t1');" style="cursor:hand">George</p> </td> </tr> </table> <hr> <table border=1> <tr> <td> <p name="t1" id="t1"></p> </td> </tr> </table> </BODY> </HTML>

If u need help please tell me... ________
George, M

Tony32 · Oct 26, 2001

Sorry I didn't explain myself very well.

Table 1 will consist of a number of rows (this example has 11) with three fields in each row. Table 2 will also consist of the same number of rows with three fields. Each table 1 row will relate directly to the corresponding row in table 2. What I am trying to achieve is that all data in table 2 is to be hidden. When I put the mouseover table 1 on any field within any given row eg row 3 then the data in row 3 on table 2 should be shown and then hidden when the mouse is moved away.

Hope this makes more sense and thanks for the responses so far. What a great site wish I had something like this when I was learning Cobol!!

mithrilhall · Oct 26, 2001

I'm not sure if I'm doing exactly what you want but here goes:

<Script Language="Javascript">

</Script>

<Table border="0">
<tr>
<td>
<Table border="1">
<tr>
<td onMouseOver="showIt('layera');" onMouseOut="hideIt('layera');">
One
<td>
</tr>
<tr>
<td onMouseOver="showIt('layerb');" onMouseOut="hideIt('layerb');">
Two
</td>
</tr>
<tr>
<td onMouseOver="showIt('layerc');" onMouseOut="hideIt('layerc');">
Three
</td>
</tr>
</Table>
</td>
<td>
<Table border="1">
<tr>
<td>
<Div id="layera" STYLE="VISIBILITY: hidden;">
A
</Div>
<td>
</tr>
<tr>
<td>
<Div id="layerb" STYLE="VISIBILITY: hidden;">
B
</Div>
</td>
</tr>
<tr>
<td>
<Div id="layerc" STYLE="VISIBILITY: hidden;">
C
</Div>
</td>
</tr>
</Table>
</td>
</tr>
</Table>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Hiding text in a table 1

Tony32

Programmer

Mighty

Programmer

shaddow

Programmer

Tony32

Programmer

mithrilhall

Programmer

Similar threads

Part and Inventory Search

Sponsor