[jaArch]

Hi:

How can I make it so that the row highlights when the user clicks the up and down link? It just highlights every 2nd row but it also applies the highlighted row to the next row.

                var rowCntr = 0;
                $('table caption a:first').click(function (){
			 
                    rowCntr++;
                    rowCntr = rowCntr + 1;
                    selector = 'tr:eq(' + rowCntr + ')';
                    $(selector).addClass("highlight");
                    return false;
                });
                var rowCntr2 = 0;
                $('table caption a:last').click(function (){
                rowCntr2++;
                rowCntr2 = rowCntr2 - 1;
                selector2 = 'tr:eq(' + rowCntr2 + ')';
                $(selector2).addClass("highlight");

                return false;
                });

  <h2>2: Zebra Striping Demo</h2>
        <table width="200" border="1">
            <caption><a href="#">UP</a> Zebra Striping Demo <a href="#">DN</a></caption>
            <tr><td>January</td> <td>February</td><td>March</td></tr>

            <tr><td>April</td><td>May</td><td>June</td></tr>
            <tr><td>July</td><td>August</td><td>September</td></tr>
            <tr><td>October</td><td>November</td><td>December</td></tr>
            <tr><td>Monday</td><td>Tuesday</td><td>Wednesday</td></tr>

            <tr><td>Thursday</td><td>Friday</td><td>Saturday</td></tr>
            <tr><td>Spring</td><td>Summer</td><td>Fall</td></tr>
        </table>

   table caption {font-weight: bold}
            table tr.over {background-color: red}
            .odd {background-color:#EEE}
            .even {background-color:#AAA}
            .highlight {background-color:yellow}

Up and Dn: In the caption element are two anchor tags UP and DN. Clicking the UP link will cause the highlighted row class .highlight to move to the next row. Clicking the DN link will cause the highlighted row class .highlight to move to the previous row. Loop the effect around the table so that it doesn't stall when you reach the top or bottom of the table.

[Jstall]

Hi,

I threw together a very quick and dirty way of handling this:

<style = "text/css">
	tr.highlight{
		background-color:yellow;
	}
</style>
<a id = "up" href = "javascript:;">Up</a> 
<a id = "down" href = "javascript:;">Down</a>
<table>
	<tr>
		<td>First</td>
	</tr>
	<tr>
		<td>Second</td>
	</tr>
	<tr>
		<td>Thrid</td>
	</tr>
</table>

<script type = "text/javascript">
$(function(){
	$("#down").click(function(){
		//see if there is currently a highlighted row 
		var current_row = highlight_exists();
		if(current_row){
			//if the last row is currently highlighted, remove highlight from current row and highlight the first row.
			if($("table tr:last").hasClass("highlight")){
				current_row.removeClass("highlight");
				$("table tr:first").addClass("highlight");
			}
			else{
				//remove highlighting from the current row and highlight the next 
				current_row.removeClass("highlight").
				next("tr").
				addClass("highlight");
			}
		}
		//there is not a currently highlighted row, highlight the first tr
		else{
			$("table tr:first").addClass("highlight");
		}
	});
	
	$("#up").click(function(){
		// again, see if there is currently a highlighted row 
		var current_row = highlight_exists();		
		if(current_row){
			//if the first row is highlighted we need to change highlighting to the last row
			if($("table tr:first").hasClass("highlight")){
				current_row.removeClass("highlight");
				$("table tr:last").addClass("highlight");				
			}
			else{
				//move highlighting to previous row 
				current_row.removeClass("highlight").
				prev("tr").
				addClass("highlight");				
			}
		}
		else{
			//highlight the last row 
			$("table tr:last").addClass("highlight");
		}
	})
	
	
	function highlight_exists(){
		//jquery object holding any row that has the highlight class(should be zero or one)
		var highlited_row = $("tr.highlight");
		//if there is a highlighted row, return the object , otherwise return false
		return (highlited_row.length > 0) ? highlited_row : false;
	}
}); 	
</script>

Tested on Firfox and it works. Hopefully the comments will give you an idea of what is happening but basically all you need to do is find the currently highlighted row(if any) , remove the highlight class from it and add the highlight class to either the next or previous row. There is also a bit of logic built in to see if the highlighting should loop around the table.

There are most likely lots of things you could do to make this more efficient etc but like I said it was quick and dirty

Hope this helps

[jaArch]

How come it's not working for me?

                $('table caption a:first').click(function (){

                	var current_row = highlight_exists();
		if(current_row){
			if($("table tr:first").hasClass("highlight")){
				current_row.removeClass("highlight");
				$("table tr:last").addClass("highlight");				
			}else{
				current_row.removeClass("highlight").
				prev("tr").
				addClass("highlight");				
			}
		}else{
			$("table tr:last").addClass("highlight");
		}
	})
                });
                $('table caption a:last').click(function (){
                
                	var current_row = highlight_exists();
		if(current_row){
			if($("table tr:last").hasClass("highlight")){
				current_row.removeClass("highlight");
				$("table tr:first").addClass("highlight");
			}else{
				current_row.removeClass("highlight").
				next("tr").
				addClass("highlight");
			}
		}else{
			$("table tr:first").addClass("highlight");
		}
	function highlight_exists(){
		var highlited_row = $("tr.highlight");
		return (highlited_row.length > 0) ? highlited_row : false;
	}
                });

[Jstall]

Hi,

Are you getting any errors? Are you sure that the click event handlers are being attached to your links as expected? The little demo I created was made to give you an idea of how to do things. When you just cut and paste existing code into your own things like this can happen.

You would be better off building each part of the functionality you are looking for piece by piece and troubleshooting it along the way. This way you will learn.

Use alert() or console.log() to probe your code to see where errors are occurring.

[jaArch]

I think I see what was wrong. You declared a function before the click event

[jaArch]

Got it!

Thanks!