title: Alert the table header name when it is clicked
body: <p>How can the 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 I click on the "File Number" box, a javascript alert box will alert me as to what the name of the column header (th) is "File Number" ect.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  #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;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table id="mstrTable"&gt;
       &lt;thead&gt;
        &lt;tr&gt; 
          &lt;th&gt;File Number&lt;/th&gt;
          &lt;th&gt;Date1&lt;/th&gt;
          &lt;th&gt;Date2&lt;/th&gt;
          &lt;th&gt;Status&lt;/th&gt;
          &lt;th&gt;Num.&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt; 
          &lt;td&gt;KABC&lt;/td&gt;
          &lt;td&gt;09/12/2002&lt;/td&gt;
          &lt;td&gt;09/12/2002&lt;/td&gt;
          &lt;td&gt;Submitted&lt;/td&gt;
          &lt;td&gt;0&lt;/td&gt;
  
        &lt;/tr&gt;
        &lt;tr&gt; 
          &lt;td&gt;KCBS&lt;/td&gt;
          &lt;td&gt;09/11/2002&lt;/td&gt;
          &lt;td&gt;09/11/2002&lt;/td&gt;
          &lt;td&gt;Approved&lt;/td&gt;
          &lt;td&gt;1&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr&gt; 
          &lt;td&gt;WFLA&lt;/td&gt;
          &lt;td&gt;09/11/2002&lt;/td&gt;
          &lt;td&gt;09/11/2002&lt;/td&gt;
          &lt;td&gt;Submitted&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt; 
          &lt;td&gt;WTSP&lt;/td&gt;
          &lt;td&gt;09/15/2002&lt;/td&gt;
          &lt;td&gt;09/15/2002&lt;/td&gt;
          &lt;td&gt;In-Progress&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
  &lt;script type="text/javascript"&gt;
  (
    function( )
    {
        var trows = document.getElementById("mstrTable").rows;
  
        for ( var t = 1; t &lt; 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 &lt; trows.length; ++t )
            {
                trow = trows[t];
                trow.className = ( trow == this &amp;&amp; trow.className != "highlighted") ? "highlighted" : "normal";
            }
        }
    }
  )();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>