Using the up and down arrow keys to select a table row

**vwphillips** · 11-10-2015, 03:18 PM

Code:

<!DOCTYPE html>
<html>
<head>
<title>Table Row Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
tr.normal td {
    color: black;
    background-color: white;
}
tr.highlighted td {
    color: white;
    background-color: red;
}
tr.highlighted2 td {
    color: white;
    background-color: blue;
}
</style>
</head>
<body>
<div id="results" class="scrollingdatagrid">
  Current Row: <select id="rownum">
  	<option value="0" selected>None</option>
	</select>
  <table id="mstrTable" cellspacing="0" border="1">
     <thead>
      <tr>
        <th>File Number</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Status</th>
        <th>Num.</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>KABC</td>
        <td>09/12/2002</td>
        <td>09/12/2002</td>
        <td>Submitted</td>
        <td>1</td>
      </tr>
      <tr>
        <td>KCBS</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Lockdown</td>
        <td>2</td>
      </tr>
      <tr>
        <td>WFLA</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Submitted</td>
        <td>3</td>
      </tr>
      <tr>
        <td>WTSP</td>
        <td>09/15/2002</td>
        <td>09/15/2002</td>
        <td>In-Progress</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
  <br /><br /><br />

  Current Row: <select id="rownum2">
  	<option value="0" selected>None</option>
	</select>
  <table id="mstrTable2" cellspacing="0" border="1">
     <thead>
      <tr>
        <th>File Number</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Status</th>
        <th>Num.</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>KABC</td>
        <td>09/12/2002</td>
        <td>09/12/2002</td>
        <td>Submitted</td>
        <td>1</td>
      </tr>
      <tr>
        <td>KCBS</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Lockdown</td>
        <td>2</td>
      </tr>
      <tr>
        <td>WFLA</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Submitted</td>
        <td>3</td>
      </tr>
      <tr>
        <td>WTSP</td>
        <td>09/15/2002</td>
        <td>09/15/2002</td>
        <td>In-Progress</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>

<script type="text/javascript">

function zxcHighlightRow(o){
 var tbl=document.getElementById(o.TableID),s=document.getElementById(o.SelectID),ncls=o.NormalClass,hcls=o.HighlightClass,i=o.Highlight,k=true;
 if (tbl&&tbl.rows[2]){
  var rows=tbl.rows,z0=1,z1=0;
  for (;z0<rows.length;z0++){
   if (s&&s.getElementsByTagName('OPTION')[0]){
	o=document.createElement('option');
	o.value=z0;
    s.appendChild(o);
	o.text = rows[z0].cells[0].innerHTML+' ('+z0+')';
   }
   this.addevt(rows[z0],'click','change',z0);
  }
  s?this.addevt(s,'change','change'):null;
  k?this.addevt(document,'keydown','key'):null;
  this.addevt(document,'click','focus')
  o=this;
  o.s=s
  o.tbl=tbl;
  o.rows=rows;
  o.hr=rows[0];
  o.n=typeof(i)=='number'?i:0;
  o.ncls=ncls;
  o.hcls=hcls;
  o.change(typeof(i)=='number'?i:0);
 }
}

zxcHighlightRow.prototype={

 change:function(n){
  var o=this,n=typeof(n)=='number'?n:o.s?o.s.selectedIndex:0;
  o.s?o.s.selectedIndex=0:null;
  o.hr.className=o.ncls;
  o.n=n=Math.min(Math.max(n,0),o.rows.length);
  if (n>0&&o.rows[n]){
   o.hr=o.rows[n]
   o.hr.className=o.hcls;
   o.s?o.s.selectedIndex=n:null;
  }
 },

 focus:function(p1,e){
  e.cancelBubble=true;
  if (e.stopPropagation){
   e.stopPropagation();
  }
  var eobj=e.target?e.target:e.srcElement;
  while (eobj.parentNode){
   if (eobj==this.tbl||eobj==this.s){
    zxcHighlightRow.o=this;
    return false;
   }
   eobj=eobj.parentNode;
  }
 },

 key:function(p1,e){
  if (zxcHighlightRow.o==this){
   this.change(this.n+(e.keyCode==38?-1:e.keyCode==40?1:0));
  }
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,e); }):null;
 }


}

new zxcHighlightRow({
 TableID:'mstrTable',
 SelectID:'rownum',
 NormalClass:'normal',
 HighlightClass:'highlighted2',
 KeyDown:true
});

new zxcHighlightRow({
 TableID:'mstrTable2',
 SelectID:'rownum2',
 NormalClass:'normal',
 HighlightClass:'highlighted',
 Highlight:2,
 KeyDown:true
});


</script>
</body>
</html>

**BIJIN P** · 01-08-2016, 06:22 AM

Originally Posted by jscheuer1

There are lots of ways. I would use version 5 events (add/attach event, rather than version 4), but without doing that, here's a way to get it to work:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Table Row Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
tr.normal td {
    color: black;
    background-color: white;
}
tr.highlighted td {
    color: white;
    background-color: red;
}
</style>
</head>
<body>
<div id="results" class="scrollingdatagrid">
  <table id="mstrTable" cellspacing="0" border="1">
     <thead>
      <tr> 
        <th>File Number</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Status</th>
        <th>Num.</th>
      </tr>
    </thead>
    <tbody>
      <tr> 
        <td>KABC</td>
        <td>09/12/2002</td>
        <td>09/12/2002</td>
        <td>Submitted</td>
        <td>1</td>

      </tr>
      <tr> 
        <td>KCBS</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Lockdown</td>
        <td>2</td>
      </tr>

      <tr> 
        <td>WFLA</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Submitted</td>
        <td>3</td>
      </tr>
      <tr> 
        <td>WTSP</td>
        <td>09/15/2002</td>
        <td>09/15/2002</td>
        <td>In-Progress</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>

<script type="text/javascript">
(
function() {
	var trows = document.getElementById('mstrTable').rows, t = trows.length, trow;

	while (--t > -1) {
		trow = trows[t];
		trow.className = 'normal';
		trow.onclick = highlightRow;
	}//end while

	function highlightRow(gethighlight) {
		gethighlight = gethighlight === true;
		var t = trows.length, hrow;
		while (--t > -1) {
			trow = trows[t];
			if(gethighlight && trow.className === 'highlighted'){return t;}
			else if (!gethighlight && trow !== this) { trow.className = 'normal'; }
		}//end while

		return gethighlight? null : this.className = this.className === 'highlighted'? 'normal' : 'highlighted';
	}//end function

	function movehighlight(way, e){
		e.preventDefault && e.preventDefault();
		e.returnValue = false;
		var idx = highlightRow(true), nextrow;
		if(typeof idx === 'number'){
			idx += way;
			if(idx && (nextrow = trows[idx])){ return highlightRow.apply(nextrow); }
			else if(idx){ return highlightRow.apply(trows[1]); }
			return highlightRow.apply(trows[trows.length - 1]);
		}
		return highlightRow.apply(trows[way > 0? 1 : trows.length - 1]);
	}

	function processkey(e){
		e = e || event;
		switch(e.keyCode){
			case 38: {//up arrow
				return movehighlight(-1, e)
			}
			case 40: {//down arrow
				return movehighlight(1, e);
			}
			default: {
				return true;
			}
		}
	}

	document.onkeydown = processkey;	
	
  }//end function
  
)();//end script
</script>
</body>
</html>

Here we go with more annotation and converting to version 5 events:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Table Row Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
tr.normal td {
    color: black;
    background-color: white;
}
tr.highlighted td {
    color: white;
    background-color: red;
}
</style>
</head>
<body>
<div id="results" class="scrollingdatagrid">
  <table id="mstrTable" cellspacing="0" border="1">
     <thead>
      <tr> 
        <th>File Number</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Status</th>
        <th>Num.</th>
      </tr>
    </thead>
    <tbody>
      <tr> 
        <td>KABC</td>
        <td>09/12/2002</td>
        <td>09/12/2002</td>
        <td>Submitted</td>
        <td>1</td>

      </tr>
      <tr> 
        <td>KCBS</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Lockdown</td>
        <td>2</td>
      </tr>

      <tr> 
        <td>WFLA</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Submitted</td>
        <td>3</td>
      </tr>
      <tr> 
        <td>WTSP</td>
        <td>09/15/2002</td>
        <td>09/15/2002</td>
        <td>In-Progress</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>

<script type="text/javascript">
(function() {
	var trows = document.getElementById('mstrTable').rows, t = trows.length, trow, nextrow,
	addEvent = (function(){return window.addEventListener? function(el, ev, f){
			el.addEventListener(ev, f, false); //modern browsers
		}:window.attachEvent? function(el, ev, f){
			el.attachEvent('on' + ev, function(e){f.apply(el, [e]);}); //IE 8 and less
		}:function(){return;}; //a very old browser (IE 4 or less, or Mozilla, others, before Netscape 6), so let's skip those
	})();

	while (--t > -1) {
		trow = trows[t];
		trow.className = 'normal';
		addEvent(trow, 'click', highlightRow);
	}//end while

	function highlightRow(gethighlight) { //now dual use - either set or get the highlighted row
		gethighlight = gethighlight === true;
		var t = trows.length;
		while (--t > -1) {
			trow = trows[t];
			if(gethighlight && trow.className === 'highlighted'){return t;}
			else if (!gethighlight && trow !== this) { trow.className = 'normal'; }
		}//end while

		return gethighlight? null : this.className = this.className === 'highlighted'? 'normal' : 'highlighted';
	}//end function

	function movehighlight(way, e){
		e.preventDefault && e.preventDefault();
		e.returnValue = false;
		var idx = highlightRow(true); //gets current index or null if none highlighted
		if(typeof idx === 'number'){//there was a highlighted row
			idx += way; //increment\decrement the index value
			if(idx && (nextrow = trows[idx])){ return highlightRow.apply(nextrow); } //index is > 0 and a row exists at that index
			else if(idx){ return highlightRow.apply(trows[1]); } //index is out of range high, go to first row
			return highlightRow.apply(trows[trows.length - 1]); //index is out of range low, go to last row
		}
		return highlightRow.apply(trows[way > 0? 1 : trows.length - 1]); //none was highlighted - go to 1st if down arrow, last if up arrow
	}//end function

	function processkey(e){
		switch(e.keyCode){
			case 38: {//up arrow
				return movehighlight(-1, e)
			}
			case 40: {//down arrow
				return movehighlight(1, e);
			}
			default: {
				return true;
			}
		}
	}//end function

	addEvent(document, 'keydown', processkey);

}/* end function */)();//execute function and end script
</script>
</body>
</html>

when i use navigation keys, i have problem with the highlighting. Since I'm Hiding a few rows on Text Search, the focus doesn't work correctly. Because focus goes to the hidden rows as well. for example ,initially if table had 10 rows, after search it has just last one row,and when i press down key, i only get highlighted row after 9 keypresses. I need the focus working straightaway on the visible rows. Please help with that

I also need your help with enter keypress. when a particular row is highlighted and i press enter i need to get the id of a column in that row and execute another function using it. please help.

**jscheuer1** · 01-31-2016, 05:45 PM

When you say hidden, do you mean visibility hidden (with or without also positioning - say absolute perhaps?), or display none, or something else (addition of a class name perhaps - how this happens is important*)? In any case, keeping track in an array of those unseen rows would be one way of disqualifying them from inclusion and/or qualifying them for being skipped when looking ahead and back with the arrow keys. Could you give us a link to your page or show us your code? That would give us more to work on. As for Enter getting the id of the highlighted, if that's it's literal id, that should be simple enough. As any give row is highlighted, make that row's id go into a variable. Press enter, and dump that value into your "execute another function". For more details, again, show us what you have so far.

*Or consider migrating to jQuery where it's easier to tell the style of each item - say row, in a collection of elements. If that's the only criterion you have to go on, jQuery may be the way to go - though it can be worked out in ordinary javascript, just a lot more complex. The main thing is though, if there's only one way these rows become unseen, that act in itself can be used to track them. Much easier than having to tell on the fly. But, as I've been saying, to see that, we would need to see the code you're currently working from - either by you posting it, or linking to it.

Thread: Using the up and down arrow keys to select a table row

Thread Tools

Search Thread

there is a problem with navigations when some columns are hidden.

Similar Threads

Highlight and navigate through images using arrow keys.

Using the Arrow Up and Down Keys to select (highlight) a table row

Need help activating slideshow navigation with arrow keys

html5canvas,js making an image movewith the click of the arrow keys along a drawnpath

Select IN table

Bookmarks

Bookmarks

Posting Permissions