移动图像表

Question

我无法弄清楚如何使这个工作。我有一张情节表，我想通过一行中的每一列进行固定跳转。

这是我的表的一部分：

 <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> 

我想让它这样，我按箭头键（左/右），然后转到该行的上/下一个列。当我按（上/下）或滚动（上/下）时，我希望页面跳转到下一行图像。随着每次跳跃，我都希望在文档的同一位置上对齐图的左上角。

我试图用这样的东西：

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

和

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

但我无法得到它的工作。我假设我需要一个合适的函数投入到这样的事情：

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

写了一段文字，然后像R2中的每一个类的名称，例如：

$(".r2")