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 4 of 4

Thread: highlight row

  1. #1
    Regular Coder
    Join Date
    May 2004
    Posts
    388
    Thanks
    73
    Thanked 0 Times in 0 Posts

    highlight row

    Happy New Year to all!

    I'm trying to highlight the row color with a style sheet and onmouseover event. I have this in my style sheet...

    TABLE.sql2 tr.highlight {
    background-color: #000080;
    color: #ffffff;

    And this in the <TR>

    <tr onmouseover="this.sql2='highlight';"
    onmouseout="this.sql2='';">

    What am I doing wrong??

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    You could try something like this

    PHP Code:
    <style type="text/css">

    .
    highlight {
    background-color#000080;
    color#ffffff;
    }

    </
    style>

    <
    table border="1">

    <
    tr onmouseover="this.className='highlight'"onmouseout="this.className=''">
    <
    td>Hello World</td>
    </
    tr>

    </
    table
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sql???
    ALWAYS remember to validate your code

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Alternatively...

    Code:
    table.sql2 tr:hover {
        background-color: #000080;
        color: #fff;
    }
    If you want to support IE6, go with a suckerfish approach...

    (rough) e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>test</title>
    	<style type="text/css">
    
    		table {
    			margin: 0 0 30px;
    		}
    
    		table.sql tr:hover,
    		table.sql tr.highlight {
    			color: #f00;
    			background-color: #fc3;
    		}
    
    	</style>
    
    	<!--[if lt IE 7]>
    
    	<script type="text/javascript">
    
    		window.onload = function() {
    
    			var tableEls = document.getElementsByTagName('table');
    			for (var i=0, tableEl; tableEl=tableEls[i]; i++) {
    				if (tableEl.className && tableEl.className.indexOf('sql') != -1) {
    					var trEls = tableEl.getElementsByTagName('tr');
    					for (var t=0, trEl; trEl=trEls[t]; t++) {
    						trEl.onmouseover = function() { this.className = 'highlight'; }
    						trEl.onmouseout = function() { this.className = '' }
    					}
    				}
    			}
    
    		}
    
    	</script>
    
    	<![endif]-->
    </head>
    <body>
    
    <table class="sql" cellpadding="10" cellspacing="0" border="1">
    	<caption>class="sql"</caption>
    	<tr>
    		<td>cell</td>
    		<td>cell</td>
    		<td>cell</td>
    	</tr>
    	<tr>
    		<td>cell</td>
    		<td>cell</td>
    		<td>cell</td>
    	</tr>
    	<tr>
    		<td>cell</td>
    		<td>cell</td>
    		<td>cell</td>
    	</tr>
    </table>
    
    
    <table cellpadding="10" cellspacing="0" border="1">
    	<caption>(no class)</caption>
    	<tr>
    		<td>cell</td>
    		<td>cell</td>
    		<td>cell</td>
    	</tr>
    	<tr>
    		<td>cell</td>
    		<td>cell</td>
    		<td>cell</td>
    	</tr>
    	<tr>
    		<td>cell</td>
    		<td>cell</td>
    		<td>cell</td>
    	</tr>
    </table>
    
    
    <table class="sql" cellpadding="10" cellspacing="0" border="1">
    	<caption>class="sql"</caption>
    	<tr>
    		<td>cell</td>
    		<td>cell</td>
    		<td>cell</td>
    	</tr>
    	<tr>
    		<td>cell</td>
    		<td>cell</td>
    		<td>cell</td>
    	</tr>
    	<tr>
    		<td>cell</td>
    		<td>cell</td>
    		<td>cell</td>
    	</tr>
    </table>
    
    </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
    •