 |
|||||||||
|
|||||||||
|
|
Every now and then it's nice to do some fun UI enhancements. We can use DHTML to select a row or column of a table. We can do this by:
Highlighting rows is easy, just add the event handles to the <tr> tag and reference it with the "this." keyword:
<TABLE id="Table2" cellSpacing="1" cellPadding="1" width="300" border="1">
<TR>
<TD>Header 1</TD>
<TD>Header 2</TD>
<TD>Header 3</TD>
</TR>
<TR onmouseover="this.className='SelectRow'" onmouseout="this.className=''">
<TD>a</TD>
<TD>b</TD>
<TD>c</TD>
</TR>
<TR onmouseover="this.className='SelectRow'" onmouseout="this.className=''">
<TD>d</TD>
<TD>e</TD>
<TD>f</TD>
</TR>
</TABLE>
Highlight columns is a little more tricky. As there isn't a "column" object (at least not to my knowledge), you need to select each cell individually. Therefore we need to add an id to each cell, and then cycle through them. Note that this doesn't interfere if you wanted to make the columns be hyperlinks, perhaps to fire off some "sort" method. If we give each cell a structured id like so:
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">
<TR>
<TD id="td_0_a" onclick="SelectColumn('a')">Header 1</TD>
<TD id="td_0_b" onclick="SelectColumn('b')">Header 2</TD>
<TD id="td_0_c" onclick="SelectColumn('c')">Header 3</TD>
</TR>
<TR>
<TD id="td_1_a">a</TD>
<TD id="td_1_b">b</TD>
<TD id="td_1_c">c</TD>
</TR>
<TR>
<TD id="td_2_a">d</TD>
<TD id="td_2_b">e</TD>
<TD id="td_2_c">f</TD>
</TR>
</TABLE>
... then we can use JavaScript to cycle through all the cells in a column:
<script language="javascript">
var strCurrentColumn = 0;
var intRowCount = 3;
function SelectColumn(strIndex)
{
//clear previous column
if ( strCurrentColumn != 0 )
{
for (var i = 0; i < intRowCount; i++) {
document.getElementById('td_' + i + '_' + strCurrentColumn).className = '';
}
}
//set new column:
strCurrentColumn = strIndex;
for (var i = 0; i < intRowCount; i++) {
document.getElementById('td_' + i + '_' + strCurrentColumn).className = 'SelectColumn';
}
}
</script>
Lastly, we could combine these two approaches such that you could select both the column and row - that might be helpful for a big table. Also, you could have some script to give alternating rows different colors too.
These are all straight-forward techniques, and they may be able to make your tables a little more flashy.
