You are viewing limited content. For full access, please sign in.

Question

Question

Tab Order in a Table

asked on July 9, 2017

Hi all,

 

I've got a client with a purchase order form that is entering the quantities for the amount of items they wish to order. Is there a way to change the "Tab" order on this form, so the client can simply press tab on the field "Quantity" and have it tab to the following Rows "Quantity" 

 

Thanks!

0 0

Replies

replied on July 10, 2017

You can add tabindex attribute to the elements as suggested http://webcheatsheet.com/html/controll_tab_order.php to control the tab order.

1 0
replied on November 12, 2021

The above link is not working, is there an updated one?

0 0
replied on November 12, 2021

Hi Priya-

Not the link above, but something from a few years ago that might be helpful: navigating the table with up and down arrows.

//Navigate HTML table via arrow keys
	$('.YourTable table').keydown(function(e){
		var $table = $(this);
		var $active = $('textarea:focus,input:focus,select:focus',$table);
		var $next = null;
		var focusableQuery = 'input:visible,select:visible,textarea:visible';
		var position = parseInt( $active.closest('td').index()) + 1;
		//console.log('position :',position);
		switch(e.keyCode){

			case 38: // <Up>                    
				$next = $active
					.closest('tr')
					.prevAll('tr:visible:first')                
					.find('td:nth-child(' + position + ')')
					.find(focusableQuery)
				;
				e.preventDefault();
				break;

			case 40: // <Down>
				$next = $active
					.closest('tr')
					.nextAll('tr:visible:first')               
					.find('td:nth-child(' + position + ')')
					.find(focusableQuery)
				;
				e.preventDefault();
				break;
		}       
		if($next && $next.length)
		{        
			$next.focus();
		}
	});

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.