1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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