DHTML IV: Highlighting a table row or column

[This was originally posted at http://timstall.dotnetdevelopersjournal.com/dhtml_iv_highlighting_a_table_row_or_column.htm]

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:

1. Decide what event triggers the highlight (clicking or mouse hovering, any cell or just the header)
2. Have a way to reference the row or column
3. Attach the appropriate JavaScript event handler, and have it change the property of the target row or column.

Highlighting rows is easy, just add the event handles to the tag and reference it with the "this." keyword:

      <TABLE id="Table2" cellSpacing="1" cellPadding="1" width="300" border="1">
        <TR>
          <TD>Header 1TD>
          <TD>Header 2TD>
          <TD>Header 3TD>
        TR>
        <TR onmouseover="this.className='SelectRow'" onmouseout="this.className=''">
          <TD>aTD>
          <TD>bTD>
          <TD>cTD>
        TR>
        <TR onmouseover="this.className='SelectRow'" onmouseout="this.className=''">
          <TD>dTD>
          <TD>eTD>
          <TD>fTD>
        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 1TD>
            <TD id="td_0_b" onclick="SelectColumn('b')">Header 2TD>
            <TD id="td_0_c" onclick="SelectColumn('c')">Header 3TD>
          TR>
          <TR>
            <TD id="td_1_a">aTD>
            <TD id="td_1_b">bTD>
            <TD id="td_1_c">cTD>
          TR>
          <TR>
            <TD id="td_2_a">dTD>
            <TD id="td_2_b">eTD>
            <TD id="td_2_c">fTD>
          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.