Category: Astral User Interface

Creating a generic JavaScript function (within the AUI project) that would add classname “hover” to visually identify the cell row and column related with the <TD> cell where the cursor is focus.

Default table layout

<table class="jTable" frame="hsides" rules="groups">
	<thead>
		<tr>
			<td id="col1" class="first">Header, 1st cell</td>
			<td id="col2">Header, 2nd cell</td>
			<td id="col3">Header, 3rd cell</td>
			<td id="col4">Header, 4th cell</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td headers="col1" class="first">Row1, 1st cell</td>
			<td headers="col2">Row1, 2nd cell</td>
			<td headers="col3">Row1, 3rd cell</td>
			<td headers="col4">Row1, 4th cell</td>
		</tr>
		<tr>
			<td headers="col1" class="first">Row2, 1st cell</td>
			<td headers="col2">Row2, 2nd cell</td>
			<td headers="col3">Row2, 3rd cell</td>
			<td headers="col4">Row2, 4th cell</td>
		</tr>
	</tbody>
</table>

Expected mark-up of the same table when animated layout on “mouse hover” using jQuery

<table class="jTable" frame="hsides" rules="groups">
	<thead>
		<tr class="hover">
			<td id="col1" class="first">Header, 1st cell</td>
			<td id="col2">Header, 2nd cell</td>
			<td id="col3" class="overRelated">Header, 3rd cell</td>
			<td id="col4">Header, 4th cell</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td headers="col1" class="first">Row1, 1st cell</td>
			<td headers="col2">Row1, 2nd cell</td>
			<td headers="col3">Row1, 3rd cell</td>
			<td headers="col4">Row1, 4th cell</td>
		</tr>
		<tr class="hover">
			<td headers="col1" class="first overRelated">Row2, 1st cell</td>
			<td headers="col2">Row2, 2nd cell</td>
			<td headers="col3" class="hover">Row2, 3rd cell</td>
			<td headers="col4">Row2, 4th cell</td>
		</tr>
	</tbody>
</table>

I got an idea after seeing the behavior of that Firefox add-on for “Complex Table Mark-up (com tab) Toolbar” on Vision Australia website.