[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to use the up/down arrow keys to highlight table rows?

Posted on 2011-04-30
6
Medium Priority
?
2,636 Views
Last Modified: 2012-05-11
How to use the up/down arrow keys to highlight table rows? I have it working with the mouse highlight but need it to work with the up and down keys as while as with the page up and page down.
<title>Untitled</title>
<style type="text/css">
.chighlight 
{
   background-color:#408080;
   color:white;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.cookies.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.iutil.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.idrag.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.grid.columnSizing.js"></script>
<script type="text/javascript">
$(function()
{
	$("table").columnSizing()
	$('input[type=checkbox]').bind('click',function(){
		if( this.checked)
		{
			var row=$(this).closest('tr');
			alert( row.attr('id') );
			
			alert( $('td:eq(1)', row).html() )//second cell
			alert( $('td:eq(2)', row).html() )//third cell
		}
	});	
});
 $(document).ready(function(){
		$('.highlight').hover(function(){
			$(this).children().addClass('chighlight');
		},function(){
			$(this).children().removeClass('chighlight');
		});
      });
</script>
</head>
<body>
<table id="theTable" border='1'>
	<tr id='rowa' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr> 
	<tr id='rowb' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
</table>
</body>
</html>

Open in new window

0
Comment
Question by:areyouready344
  • 3
  • 2
6 Comments
 

Author Comment

by:areyouready344
ID: 35499332
I meant a solution using jquery not javascript.
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 35499346
For example :
<title>Untitled</title>
<style type="text/css">
.chighlight 
{
   background-color:#408080;
   color:white;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.cookies.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.iutil.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.idrag.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.grid.columnSizing.js"></script>
<script type="text/javascript">
$(function()
{
	$("table").columnSizing()
	$('input[type=checkbox]').bind('click',function(){
		if( this.checked)
		{
			var row=$(this).closest('tr');
			alert( row.attr('id') );
			
			alert( $('td:eq(1)', row).html() )//second cell
			alert( $('td:eq(2)', row).html() )//third cell
		}
	});	
});
$(document).ready(function(){
	$('.highlight').hover(function(){
		$(this).children().addClass('chighlight');
	},function(){
		$(this).children().removeClass('chighlight');
	});
	l = -1;
	$(document).keyup(function(e) {
		debugger;
		if(e.keyCode == 38) {
			if(--l<0) {
				l = 0;
			}
			$("tr","table").removeClass('chighlight');
			$("tr:eq(" + l + ")","table").addClass('chighlight');
		}
		else if(e.keyCode == 40) {
			if(++l>$("tr", "table").length-1) {
				l = $("tr", "table").length-1;
			}
			$("tr","table").removeClass('chighlight');
			$("tr:eq(" + l + ")","table").addClass('chighlight');
		}
	})
});
</script>
</head>
<body>
<table id="theTable" border='1'>
	<tr id='rowa' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr> 
	<tr id='rowb' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
	<tr id='rowc' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
	<tr id='rowd' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
	<tr id='rowe' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
	<tr id='rowf' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
</table>
</body>
</html>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:areyouready344
ID: 35499451
Super thanks a million leakim, the row highlight using the mouse works perfect but the up/down almost works with minor exception of the first row remains highlighted after pressing the down key to highlight the other rows. I see this problem both Firefox 4 and IE 8. Any idea what could be causing this minor problem?
0
 

Author Comment

by:areyouready344
ID: 35500652
its actually working, thanks. I made the mistake of having the mouse pointer inside the cell at the same time I was using the up/down arrow keys.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 35500683
OK, Thanks for the points.

Check the following :
<title>Untitled</title>
<style type="text/css">
.chighlight 
{
   background-color:#408080;
   color:white;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.cookies.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.iutil.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.idrag.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.grid.columnSizing.js"></script>
<script type="text/javascript">
$(function()
{
	$("table").columnSizing()
	$('input[type=checkbox]').bind('click',function(){
		if( this.checked)
		{
			var row=$(this).closest('tr');
			alert( row.attr('id') );
			
			alert( $('td:eq(1)', row).html() )//second cell
			alert( $('td:eq(2)', row).html() )//third cell
		}
	});	
});
$(document).ready(function(){
	$('.highlight').hover(function(){
		l = $(this).parents("table").find("tr").index(  $(this) );
		$(this).addClass('chighlight');
	},function(){
		$(this).removeClass('chighlight');
	});
	l = -1;
	$(document).keyup(function(e) {
		if(e.keyCode == 38) {
			if(--l<0) {
				l = 0;
			}
			$("tr","table").removeClass('chighlight');
			$("tr:eq(" + l + ")","table").addClass('chighlight');
		}
		else if(e.keyCode == 40) {
			if(++l>$("tr", "table").length-1) {
				l = $("tr", "table").length-1;
			}
			$("tr","table").removeClass('chighlight');
			$("tr:eq(" + l + ")","table").addClass('chighlight');
		}
	})
});
</script>
</head>
<body>
<table id="theTable" border='1'>
	<tr id='rowa' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr> 
	<tr id='rowb' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
	<tr id='rowc' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
	<tr id='rowd' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
	<tr id='rowe' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
	<tr id='rowf' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
</table>
</body>
</html>

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question