Ray's Test Page

This page shows to open a JS Alert box when a table cell is clicked on.

It was written as a response to a question on the 0Catch forums

Here's a normal table ...

First subject Fourth subject Seventh subject
Second subject Fifth subject Eighth subject
Third subject Sixth subject Ninth subject

 

Here's the completed table ...

First subject Fourth subject Seventh subject
Second subject Fifth subject Eighth subject
Third subject Sixth subject Ninth subject

 

The cursor changes to a hand when over the table to indicate it is clickable. This is done by adding

onMouseOver="style.cursor='hand'"

table definition, which is now

<table border="1" width="60%" cellspacing="0" cellpadding="0" id="table2" onMouseOver="style.cursor='hand'">

 

The alert box is called when a particular cell is clicked on. The code for each cell now becomes similar to

<td align="center" onClick="alert('This is the information for the 1st cell')"><font size="4" color="#0000FF">First subject</font></td>

 

Cells 7, 8 and 9 show how to display multi line alert boxes. This just involves putting \n where you want the line breaks to occur.

For example the code for the ninth cell is

<td align="center" onClick="alert('This is the information for the 9th cell.\nThis is an even longer message.\nIt is four lines long.\nHere is the final line.')"><font size="4" color="#0000FF">Ninth subject</font></td>

 

The problem is that the above requires some work on the part of the viewer. Too many alert boxes and the clicking on them to get rid of them soon gets tedious. In the version below, the TITLE attribute is used in the cell codes, this creates a tooltip whenever the mouse is passed over the cell.

First subject Fourth subject Seventh subject
Second subject Fifth subject Eighth subject
Third subject Sixth subject Ninth subject

The code for each cell now becomes similar to

<td align="center" title="This is the information for the 1st cell"><font size="4" color="#0000FF">First subject</font></td>

Cells 7, 8 and 9 now show multi-line tooltips. The TITLE attribute doesn't understand the \n method of adding lines, in fact the tooltips actually print them! Put the mouse cursor over cell 5 to see what happens. Instead the codes &#10;&#13; have to be used instead. If you remember ASCII codes, 10 is for a line feed and 13 is for a carriage return.

The code for cell 9 now becomes

<td align="center" title="This is the information for the 9th cell.&#10;&#13;This is an even longer message.&#10;&#13;It is four lines long.&#10;&#13;Here is the final line."><font size="4" color="#0000FF">Ninth subject</font></td>

 

This page created 18th October 2004, last modified 19th October 2004

 


GoStats stats counter