row change in table

[cornboy88]

I am navigating a table with text boxes using the arrow keys on the keyboard with the script below. I need to change it so is does not need the id of the text boxes. but it still needs to go you and down in the same column as the one you started in. The below script assumes you are using aspx text boxes

Thanks

To use the below code wrap the table in a div and give it onkeydown="return dgnav_onkeydown()

function dgnav_onkeydown() 
{
   var direction ;
  
   
 //Ensure that:
 // 1) the browser is IE
 // 2) Either the up (38) or down (40) arrow key was pressed
 // 3) None of the of modifier (Shift/Ctrl/Alt) keys were pressed.
   if (!document.all) return true;
   if (event.keyCode == KEYCODE_DOWNARROW && (!(event.shiftKey || event.ctrlKey || event.altKey ))) direction = +1;
   else if (event.keyCode == KEYCODE_UPARROW && (!(event.shiftKey || event.ctrlKey || event.altKey ))) direction = -1;
   else return true;
 
 //Ensure that the current control is a text box...
   var obj = window.event.srcElement;
   if (!(obj.tagName == "INPUT" && obj.type == "text")) return true;
 
 //parse the id of the current text box to get the current row.
 //If inside of an asp.net datagrid, the id will be something like:
   //    <dgid>__ctl<row#>_<txtboxid>

   var obj_id = obj.id.toString();
   var rex = new RegExp("^(.*_ctl)([0-9]+)(.*)$");
   var match_array = obj_id.match(rex);
   if (match_array == null) return true;
   var j = parseInt(match_array[2],10); // j = the current row
   
//now look - up to afwdgnav_lookahead rows - in the direction the 
//user choose for the target text box.  If the target text box is 
//enabled and not read-only, move focus to the text box.
   var i;
   var target_id ;
   for(i=0;i<afwdgnav_lookahead;i++) {
      j = j + direction;
      if (j < 0) break;
      if (j < 10)
      {
      //conrol may have leading zero (ASP.Net v2.0) Ref Defect 5982
      target_id = match_array[1] + "0" + j.toString() + match_array[3];
      } else {
      target_id = match_array[1] + j.toString() + match_array[3];
  }
  debugger;
      var target = document.getElementById(target_id);
      if (target == null)
      {
         if( j < 10) 
         {
      //check for field w/o leading zero (for backward compatibilty w ASP.Net v1.1) Ref Defect 5982
            target_id = match_array[1] + j.toString() + match_array[3];
            target = document.getElementById(target_id);
         }
      }
      if (target == null) continue;
      if(typeof(target) != "undefined" && target.tagName == "INPUT" && target.type == "text") {
         var target_x = "document.all[\"" + target_id + "\"]";
         if (target.disabled==false && target.readOnly == false) {
            setTimeout(target_x + ".focus();" + target_x + ".select();", 1);
            break;
         }
      }
   }
      
   return false;

}

 

[BillyRayPreachersSon]

I'd use the "cellIndex" property of the TD elements - it gives you the column number.

So, from your initial input, traverse up to the TD element using .parentNode and checking .tagName, and then get the column with .cellIndex. Then, you can simply use that index in the rows and cells collections of the table to navigate as you wish.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign