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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    colour the list column onclick using java script

    hi friends

    i am new to javascript, can you some one help me to highlight with colour the list coloumn using java scipt

    i have list report and whatever onclick column should highlight with red

    thanks in advance

    - gpti

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I know there are better ways to do this, using advanced CSS, but I'm not enough of a CSS person to know the right trick.

    Here's my straightforward way of doing it:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #myTable td {
        color: black;
        cursor: pointer;
    }    
    </style>
    </head>
    <body>
    <table id="myTable" border="1" cellpadding="10">
    <tr>
        <td>First name</td><td>Last Name</td><td>Age</td><td>Phone</td>
    </tr>
    <tr>
        <td>John</td><td>Doe</td><td>37</td><td>8005551212</td>
    </tr>
    <tr>
        <td>Mary</td><td>Row</td><td>32</td><td>8881112222</td>
    </tr>
    </table>
    
    <script type="text/javascript">
    var tbl = document.getElementById("myTable");
    for ( var r = 0; r < tbl.rows.length; ++r )
    {
       var row = tbl.rows[r];
       for ( var c = 0; c < row.cells.length; ++c )
       {
           row.cells[c].onclick = getClick(c);
       }
    }
    function getClick( which )
    {
        var clicked = which;
        return function() { columnClick(clicked); }
    }
    
    function columnClick( col )
    {
        for ( var r = 0; r < tbl.rows.length; ++r )
        {
           var row = tbl.rows[r];
           for ( var c = 0; c < row.cells.length; ++c )
           {
               row.cells[c].style.color = c == col ? "red" : "black";
           }
        }
    }
    </script>
        
    </body>
    </html>
    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.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    The simpler solution is to use <col></col> and cellIndex. See my solution here.

  • Users who have thanked glenngv for this post:

    Old Pedant (07-22-2013)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Thanks. That's what I was looking for, though I didn't know it.

    I'd probably still use a closure, as in my above code, to minimize the coding. But clearly changing the <col> style is much preferable.

    It bugs me that he cross-posted.
    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.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by Old Pedant View Post
    I'd probably still use a closure, as in my above code, to minimize the coding.
    Your code attaches onclick handler to as many cells on the table. If the table has a total of 100 cells, you would have 100 onclick handlers attached. Mine has only 1 onclick handler.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Yeah, I see that. If I wasn't using a closure, it would only be one actual handler, attached to 100 cells. Which is fine. But I agree, getting 100 handler functions is onerous. Okay, you made me rethink this one.
    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.


  •  

    Posting Permissions

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