Durch die Bildtabelle bewegen

Question

Ich habe Probleme herauszufinden, wie man das zur Arbeit bringt. Ich habe eine Tabelle mit Plots und ich möchte einen festen Sprung durch jede der Spalten einer Zeile machen.

Dies ist ein Teil meiner Tabelle:

 <tr> 
      <td>First</td> 
      <td>Second</td> 
      <td>Third</td> 
      <td>Fourth</td> 
     </tr> 

     <tr class="r1"> 
      <td><div class="col1"><img src="1.bmp"></div></td> 
      <td><div class="col2"><img src="2.bmp"></div></td> 
      <td><div class="col3"><img src="3.bmp"></div></td> 
      <td><div class="col4"><img src="4.bmp"></div></td> 
     </tr> 

     <tr class="r2"> 
      <td><div class="col1"><img src="3.bmp"></div></td> 
      <td><div class="col2"><img src="1.bmp"></div></td> 
      <td><div class="col3"><img src="2.bmp"></div></td> 
      <td><div class="col4"><img src="4.bmp"></div></td> 
     </tr> 

Ich will es machen, so dass ich eine Pfeiltaste drücken (links/rechts) und in der Zeile in die prev/next Spalte gehen. Wenn ich (hoch/runter) oder scrolle (hoch/runter) drücke, möchte ich, dass die Seite zur nächsten Reihe von Bildern springt. Mit jedem Sprung möchte ich die obere linke Ecke der Plots der Ausrichtung auf der gleichen Stelle auf dem Dokument ausrichten.

Ich habe versucht, Sachen zu verwenden wie:

var i = 1; 
$(window).click(function() { 
    $(window).scrollLeft($("r2:nth-child(" + i + ")").position().left); 
    i++; 
}); 

und

$('r2').scroll(function(){ 
    var left = $(this).offset().left, 
    top = $(this).offset().top; 
    window.scrollTo(0, top); 
}); 

Aber ich kann es nicht zu arbeiten. Ich gehe davon aus, dass ich eine geeignete Funktion brauchen so etwas wie zu setzen in:

document.onkeydown = function(e) { 
    switch (e.keyCode) { 
     case 37: 
      //jump to plot on right if < 4 
      break; 
     case 38: 
      //jump to plot above if not top row 
      break; 
     case 39: 
      //jump to plot on left if > 1 
      break; 
     case 40: 
      //jump to plot below if not last row 
      break; 
    } 
}; 

Answer 1

einen Zeitraum Charakter schreiben, mit dem Namen der jeder Klasse wie r2 gefolgt, zum Beispiel:

$(".r2")