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 2 of 2
  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! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Here's a plain javascript solution:
    Code:
    <!doctype html>
    <html>
    <head>
    <style>
    .highlighted { background: red; }
    </style>
    </head>
    <body>
    <table id="tbl" border="1">
        <colgroup>
            <col />
            <col />
            <col />
            <col />
        </colgroup>
        <thead>
            <th>head 1</td>
            <th>head 2</td>
            <th>head 3</td>
            <th>head 4</td>
        </thead>
        <tbody>
            <tr>
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
                <td>col 4</td>
            </tr>
            <tr>
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
                <td>col 4</td>
            </tr>
            <tr>
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
                <td>col 4</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
    (function() {
        var prevIndex;
        document.getElementById('tbl').onclick = function (e)    {
            var el = e.target;
            if (el.tagName === 'TD' || el.tagName === 'TH') {
                var cols = this.getElementsByTagName('col');
                cols[el.cellIndex].className += ' highlighted';
                if (typeof prevIndex != 'undefined') { //remove previously highlighted cell
                    cols[prevIndex].className = cols[prevIndex].className.replace(/(?:^|\s)highlighted(?!\S)/, '');
                }
                prevIndex = el.cellIndex;
            }    
        }
    })();
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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