1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

Change the background color of a row in a table upon mouse click

Discussion in 'JSP' started by teetu14341, Apr 26, 2010.

  1. teetu14341

    teetu14341 New Member

    Joined:
    Apr 26, 2010
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Hi,

    I have a html zebra table which is generated dynamically. Upon clicking on any of the rows that row should get highlighted. I am unable to achieve this due to the css specified for achieving the zebra pattern for the table.

    The code for the above is:

    html:

    HTML:
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="main.css" rel="stylesheet" type="text/css">
        <title>Search Approver</title>
        <script
            src="approver.js"></script>
    </head>
    <body onLoad="setFocus(); window.resizeTo(655,450)">
    <form id="approverForm" name="approverForm">
    
    <div id="approverwindowresults">
    <table>
    <tr>
        <th colspan="3" align="center">
            Select a group
        </th>
    </tr>
    <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Email</th>
    </tr>
    <tr  id="230552" onClick="HighLightTR(230552);"><td>230552</td><td>Row1</td><td>nitin14341@yahoo.com</td></tr>
    <tr  id="230553" onClick="HighLightTR(230553);"><td>230553</td><td>Row2</td><td>nitin14341@yahoo.com</td></tr>
    <tr  id="230554" onClick="HighLightTR(230554);"><td>230554</td><td>Row3</td><td>nitin14341@yahoo.com</td></tr>
    <tr  id="230555" onClick="HighLightTR(230555);"><td>230555</td><td>Row4</td><td>nitin14341@yahoo.com</td></tr>
    </table>
    </div>
    
    
    </form>
    </body>
    </html>
    main.css:
    HTML:
    #approverwindowresults
    {
        margin: 5% 5% 2% 5%;
        border: 1px solid grey;
        overflow: auto;
        width: 20%;
        height: 200px;
        
    }
        #approverwindowresults table
        {
            width: 100%;
            margin: 0px;
            border-collapse: collapse;
            border: 0px solid #BBBBBB;
            cellspacing: 0px;
        }
        #approverwindowresults table td
        {
            height: 17px;
            white-space: nowrap;
            padding-left: 3px;
            background-color: rgb(255,255,255);
        }
        #approverwindowresults table tr:nth-child(2n) td
        {
            background-color: rgb(237,243,254);
        }
        #approverwindowresults table tr td.spec
        {
            background: rgb(211,230,253);
        }
    approver.js:

    HTML:
    function HighLightTR (grpid) {
        
        alert ('Entered HighLightTR');
        document.getElementById(grpid).style.background = '#3875D7';
        alert ('Exiting HighLightTR');
    }
    Please provide some help on this
     

Share This Page