Returning the name of the column Header When Clicked

jason_kelly · 10-22-2012, 07:40 PM

Hello,

I really need your help and am fairly new to javascript.

Given the html table below, how can I create a javascript function that will, at the click of a mouse, alert me as to what the name of the column header is?

Ie. if I click on the COLORS header, a javascript box will popup and alert("COLORS")?

I am not sure where to begin. I am using IE. 7 so it would have to be compatible

Code:

<html> 
 
<head> 

</head> 
 
<body> 
 
<table border="1" cellspacing="1" width="500"> 
    <tr> 
        <td>FRUITS</td> 
        <td>COLORS</td> 
        <td>VEGGIES</td> 
        <td>NUMBERS</td> 
    </tr> 
    <tr> 
        <td>apples</td> 
        <td>red</td> 
        <td>carrots</td> 
        <td>123</td> 
    </tr> 
    <tr> 
        <td>oranges</td> 
        <td>blue</td> 
        <td>celery</td> 
        <td>456</td> 
    </tr> 
    <tr> 
        <td>pears</td> 
        <td>green</td> 
        <td>brocoli</td> 
        <td>789</td> 
    </tr> 
    <tr> 
        <td>mangos</td> 
        <td>yellow</td> 
        <td>lettuce</td> 
        <td>098</td> 
    </tr> 
</table> 
 
</body> 
 
</html>

Old Pedant · 10-22-2012, 10:38 PM

Code:

<html> 
<head> 
</head> 
<body> 
<table id="MyTable" border="1" cellspacing="1" width="500"> 
    <tr> 
        <td>FRUITS</td> 
        <td>COLORS</td> 
        <td>VEGGIES</td> 
        <td>NUMBERS</td> 
    </tr> 
    <tr> 
        <td>apples</td> 
        <td>red</td> 
        <td>carrots</td> 
        <td>123</td> 
    </tr> 
    <tr> 
        <td>oranges</td> 
        <td>blue</td> 
        <td>celery</td> 
        <td>456</td> 
    </tr> 
    <tr> 
        <td>pears</td> 
        <td>green</td> 
        <td>brocoli</td> 
        <td>789</td> 
    </tr> 
    <tr> 
        <td>mangos</td> 
        <td>yellow</td> 
        <td>lettuce</td> 
        <td>098</td> 
    </tr> 
</table> 
 
<script type="text/javascript">
(
  function( )
  {
      var tbl = document.getElementById("MyTable");
      var row1 = tbl.rows[0];
      var tds = row1.cells;
      for ( var t = 0; t < tds.length; ++t )
      {
          tds[t].style.cursor = "hand"; // OPTIONAL, but a nice idea
          tds[t].onclick = function( ) { alert(this.innerHTML); }
      }
  }
)( );
</script>

</body> 
 </html>

Works in all browsers at least back to MSIE 7.

jason_kelly · 10-25-2012, 01:48 AM

Thanks very much. Worked Like a charm

Thanks again for helping me out.