CodingForums.com - View Single Post - Returning the name of the column Header When Clicked

jason_kelly · 01-14-2013, 06:14 PM

Hello,

I need the help of an expert out there.

How can the existing code be modified below, so as to return the name of the column header when the column header box is clicked by the user.

Ie. if the column header "File Number" box is clicked by the user, a javascript alert box will alert them as to what the name of the column header (File Number) ect. for each of the column headers.

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mstrTable {
     border: 1px solid black
}
#mstrTable td, th {
     border: 1px solid black
}

#mstrTable tr.normal td {
    color: black;
    background-color: white;
}
#mstrTable tr.highlighted td {
    color: white;
    background-color: gray;
}
</style>
</head>
<body>
  <table id="mstrTable">
     <thead>
      <tr> 
        <th>File Number</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Status</th>
        <th>Num.</th>
      </tr>
    </thead>
    <tbody>
      <tr> 
        <td>KABC</td>
        <td>09/12/2002</td>
        <td>09/12/2002</td>
        <td>Submitted</td>
        <td>0</td>

      </tr>
      <tr> 
        <td>KCBS</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Approved</td>
        <td>1&nbsp;</td>
      </tr>

      <tr> 
        <td>WFLA</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Submitted</td>
        <td>2</td>
      </tr>
      <tr> 
        <td>WTSP</td>
        <td>09/15/2002</td>
        <td>09/15/2002</td>
        <td>In-Progress</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>

<script type="text/javascript">
(
  function( )
  {
      var trows = document.getElementById("mstrTable").rows;

      for ( var t = 1; t < trows.length; ++t )
      {
          trow = trows[t];
          trow.className = "normal";
          trow.onclick = highlightRow;
      }

      function highlightRow(e)
      {
      alert('Row is ' + (this.rowIndex-1))
          for ( var t = 1; t < trows.length; ++t )
          {
              trow = trows[t];
              trow.className = ( trow == this && trow.className != "highlighted") ? "highlighted" : "normal";
          }
      }
  }
)();
</script>
</body>
</html>