Page 2 of 2 FirstFirst 12
Results 11 to 13 of 13

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

  1. #11
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  2. #12
    Join Date
    Jan 2016
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    Quote Originally Posted by jscheuer1 View Post
    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.

  3. #13
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 02-01-2016 at 01:38 AM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 4
    Last Post: 04-28-2013, 04:01 PM
  2. Replies: 2
    Last Post: 01-22-2013, 02:58 PM
  3. Need help activating slideshow navigation with arrow keys
    By MamaGeek in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-25-2012, 04:47 PM
  4. Replies: 0
    Last Post: 12-23-2010, 01:59 AM
  5. Select IN table
    By Master_script_maker in forum MySQL and other databases
    Replies: 6
    Last Post: 10-25-2009, 06:41 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •