Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    193
    Thanks
    147
    Thanked 0 Times in 0 Posts

    Returning the name of the column Header When Clicked

    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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,655 Times in 4,617 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jason_kelly (10-25-2012)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    193
    Thanks
    147
    Thanked 0 Times in 0 Posts
    Thanks very much. Worked Like a charm Thanks again for helping me out.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •