移動圖像表

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