移动图像表

我很难弄清楚如何让这个工作。我有一个图表，我想对一行的每一列做一个固定的跳转。

这是我的表的一部分:

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

我想这样做，我按下箭头键(左/右)并转到该行的上一列/下一列。当我按(上/下)或滚动(上/下)时，我希望页面跳转到下一行图像。每次跳转时，我都要让左上角的plot对齐到文档的同一位置。

我试着用这样的东西:

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