Web Analytics Made Easy -
StatCounter Highlighting a row in a table - CodingForum

Announcement

Collapse
No announcement yet.

Highlighting a row in a table

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Highlighting a row in a table

    hi,

    i have a large table in my web page, and would like to know if it was possible to have it so when any <td> was clicked it would highlight the entire row, so that it was easier to see that row across the table??
    like when u drag the mouse across it highlights the stuff underneath, but i want it to do this with a single click..

    anyone have ideas??

    cheers

  • #2
    PHP Code:
    <tr onclick="this.className=(this.className=='off') ? 'on': 'off';" class="off"
    and set up your CSS accordingly, with different classes for the different states.
    *keep it simple (TM)

    Comment


    • #3
      cool, thanks.

      i have it now so that when i click the row it is highlighted, but i need it to de-highlight the last row when the next is pressed. so that only one is highlighted at a time

      how do i do this?

      Comment


      • #4
        haha...use onmouseover, onmouseout instead of onclick!

        i do have a brain!

        now i just have to paste that line into the 250 rows! sweet

        Comment


        • #5
          Originally posted by theexo51
          i just have to paste that line into the 250 rows! sweet
          no, you don't. there's a solution to that, too. i'll post in a minute or so.
          *keep it simple (TM)

          Comment


          • #6
            Hi there theexo51,

            you may find this script of interest, it uses onclick rather than onmouseover...
            Code:
            [color=navy]<!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">
            <head>
            <title>hi-light trs onclick</title>
            
            <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
            
            <style type="text/css">
            /*<![CDATA[*/
            
            table {
                 border: solid 1px #000;
                 margin:auto;
             }
            td {
                 width:162px;
                 height:30px;
                 border: solid 1px #000;
             }
            
            /*//]]>*/
            </style>
            
            <script type="text/javascript">
            //<![CDATA[
            
            function hiLight(el,color) {
              var rows=document.getElementsByTagName("tr");
            for(i=0;i<rows.length;i++) {
              rows[i].style.background="#fff";
              }
            el.style.background=color;
              }
            
            //]]>
            </script>
            
            </head>
            <body>
            
            <table>
            <tr onclick="hiLight(this,'#fcc')">
            <td> </td><td> </td><td> </td>
            </tr>
            <tr onclick="hiLight(this,'#ccf')">
            <td> </td><td> </td><td> </td>
            </tr>
            <tr onclick="hiLight(this,'#cfc')">
            <td> </td><td> </td><td> </td>
            </tr>
            <tr onclick="hiLight(this,'#fcc')">
            <td> </td><td> </td><td> </td>
            </tr>
            <tr onclick="hiLight(this,'#ccf')">
            <td> </td><td> </td><td> </td>
            </tr>
            </table>
            
            </body>
            </html>[/color]
            coothead
            ~ the original bald headed old fart ~

            Comment


            • #7
              yeah cool, thats what i ws after originally.

              i will leave it as mouseon mouseout for now, see what the guy thinks and change it to that if need be.

              thanks for the swift replies everyone!

              Comment


              • #8
                Originally posted by coothead
                Code:
                [color=navy]
                …
                
                function hiLight(el,color) {
                  var rows=document.getElementsByTagName("tr");
                for(i=0;i<rows.length;i++) {
                  rows[i].style.background="#fff";
                  }
                el.style.background=color;
                  }
                
                …
                
                <table>
                <tr onclick="hiLight(this,'#fcc')">
                <td> </td><td> </td><td> </td>
                </tr>
                <tr onclick="hiLight(this,'#ccf')">
                <td> </td><td> </td><td> </td>
                </tr>
                <tr onclick="hiLight(this,'#cfc')">
                <td> </td><td> </td><td> </td>
                </tr>
                <tr onclick="hiLight(this,'#fcc')">
                <td> </td><td> </td><td> </td>
                </tr>
                <tr onclick="hiLight(this,'#ccf')">
                <td> </td><td> </td><td> </td>
                </tr>
                </table>[/color]
                coothead
                A more 'unobtrusive' method would be to use js/dom to add the onclick events, rather than hard-coding them into every targeted tr element.
                Not only does it mean you aren't cluttering up the markup with potentially sh*tloads of events and js code, but it also means you can enable/disable the effect much more quickly and simply remotely, from within the external js file.

                e.g.

                Code:
                [color=navy]
                function setTRhighlight() {
                var dataTableTr = document.getElementsByTagName('table')['dataTable'].getElementsByTagName('tr');
                for (i=0; i<dataTableTr.length; i++) {
                	dataTableTr[i].setAttribute("onclick","hiLight(this,'#ccf')");
                	}
                }
                
                function hiLight(el,color) {
                var rows=document.getElementsByTagName("tr");
                for(i=0;i<rows.length;i++) {
                	rows[i].style.background="#fff";
                	}
                	el.style.background=color;
                }
                
                window.onload = setTRhighlight;
                
                …
                
                <table [color=red]id="dataTable"[/color]>
                	<tr>
                		<td>text</td>
                		<td>text</td>
                		<td>text</td>
                	</tr>
                	<tr>
                		<td>text</td>
                		<td>text</td>
                		<td>text</td>
                	</tr>
                	<tr>
                		<td>text</td>
                		<td>text</td>
                		<td>text</td>
                	</tr>
                	<tr>
                		<td>text</td>
                		<td>text</td>
                		<td>text</td>
                	</tr>
                	<tr>
                		<td>text</td>
                		<td>text</td>
                		<td>text</td>
                	</tr>
                </table>
                [/color]
                Unobtrusive javascript, progressive enhancement and all that malarkey…

                Though, of course, if we're doing proper progressive enhancement, we'd simply ditch all that js and use a single line of css…

                Code:
                table#dataTable tr:hover { background-color: #ccf; }
                It will work in compliant browsers (count out IE6), but then, that's the point of progressive enhancement - namely to improve the situation using appropriate means for the benefit of those browsers which properly support standards and those people who use them.

                -

                Incidentally, coothead…
                Code:
                <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
                Last I heard, that doesn't have any effect on how the page is served and isn't an effective means to serve XHTML as application/xhtml+xml.


                [edit]
                Checked it in FF and your code is still being served as text/html.

                …fwiw.
                Last edited by Bill Posters; Jul 29, 2005, 07:42 AM.
                Why you should validate your code before asking for help...

                Comment


                • #9
                  thanks bill. could have done with that like 20 mins ago all those JS lines in the TR will just have to do now! lol

                  Comment


                  • #10
                    you can do this in CSS 2:

                    PHP Code:
                    tr
                    {
                      
                    backgroundwhite;
                    }

                    tr:hover
                    {
                      
                    backgroundred;

                    doesn't work in IE, tho. so we need to correct it with some JS. this then is the entire page. as you can see, there's less JS:

                    Code:
                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                    <html>
                    	<head>
                      		<title>Add Row Events</title>
                      		
                      		<script type="text/javascript">
                    			
                    			function addRowEvents()
                    			{
                    				var aRows, i=(aRows=arguments[0].getElementsByTagName("TR")).length-1;
                    				
                    				do
                    				{
                    					aRows[i].onmouseover = aRows[i].onmouseout = function()
                    					{
                    						(event.type=="mouseover") ? this.className+=" ie-over": this.className=this.className.replace(new RegExp(" ie-over\\b"), "");
                    					}
                    				}
                    				while (i-->0)
                    			}
                    			
                    			window.onload=function()
                    			{
                    				if (window.clientInformation) addRowEvents(document.getElementById('datatable'));
                    			}
                    			
                    		</script>
                    		
                    		<style type="text/css">
                    		
                    			tr
                    			{
                    				background: #CCC;
                    				color: #003;
                    				font-weight: normal;
                    				cursor: normal;
                    			}
                    			
                    			tr:hover, tr.ie-over
                    			{
                    				background: #306;
                    				color: #FFF;
                    				font-weight: bold;
                    				cursor: pointer;
                    			}
                    		
                    		</style>
                    	</head>
                    
                    
                    
                    	<body>
                    		<h1>Add Row Events</h1>
                    		<p>Fun with DHTML</p>
                    		
                    		<table id="datatable">
                    			<tr>
                    				<td>javascript</td>
                    			</tr>
                    			
                    			<tr>
                    				<td>html</td>
                    			</tr>
                    			
                    			<tr>
                    				<td>css</td>
                    			</tr>
                    		</table>
                    	</body>
                    </html>
                    *keep it simple (TM)

                    Comment


                    • #11
                      oh yeah, thats just what i was about to suggest

                      wish i could know stuff like this, but alas my brain is to shrivveled up to learn new stuff. i blame peer pressure at Uni, i never wanted to try it

                      Comment

                      Working...
                      X