javascript - 使用箭头键使用输入文本导航两个 HTML 表

Question

在我的 previous post ，我询问了如何使用箭头键导航表格单元格。现在我正在尝试创建另一个与第一个表行为相同的表。

如何实现？

这是我目前所拥有的:

var active = 0;
//$('#navigate td').each(function(idx){$(this).html(idx);});
rePosition();

$(document).keydown(function(e) {
    var inp = String.fromCharCode(event.keyCode);
    if (!(/[a-zA-Z0-9-_ ]/.test(inp) || event.keyCode == 96)){
      reCalculate(e);
      rePosition();
      // if key is an arrow key, don't type the user input.
      // if it is any other key (a, b, c, etc)
      // edit the text
      if (e.keyCode > 36 && e.keyCode < 41) {
        return false;
      }
    }
});

$('td').click(function() {
    active = $(this).closest('table tbody').find('td').index(this);
    rePosition();
});


function reCalculate(e) {
    var rows = $('#navigate tbody tr').length;
    var columns = $('#navigate tbody tr:eq(0) td').length;
    var temp;

    if (e.keyCode == 37) { //move left or wrap
        temp = active;
        while (temp > 0) {
            temp = temp - 1;
            // only advance if there is an input field in the td
            if ($('#navigate tbody tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 38) { // move up
        temp = active;
        while (temp - columns >= 0) {
            temp = temp - columns;
            // only advance if there is an input field in the td
            if ($('#navigate tbody tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 39) { // move right or wrap
        temp = active;
        while (temp < (columns * rows) - 1) {
            temp = temp + 1;
            // only advance if there is an input field in the td
            if ($('#navigate tbody tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 40) { // move down
        temp = active;
        while (temp + columns <= (rows * columns) - 1) {
            temp = temp + columns;
            // only advance if there is an input field in the td
            if ($('#navigate tbody tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
}

function rePosition() {
    console.log(active);
    $('.active').removeClass('active');
    $('#navigate tbody tr td').eq(active).addClass('active');
    $('#navigate tbody tr td').find('input').removeClass('textClass');
    $('#navigate tbody tr td').eq(active).find('input').addClass('textClass');
    $('#navigate tbody tr td').eq(active).find('input').select();
    var input = $('#navigate tbody tr td').eq(active).find('input').focus();
    scrollInView();
}

function scrollInView() {
    var target = $('#navigate tbody tr td:eq(' + active + ')');
    if (target.length) {
        var top = target.offset().top;

        $('html,body').stop().animate({
            scrollTop: top - 100
        }, 400);
        return false;
    }
}

td.active{
border:2px solid #2c3e50;
font-weight:bold;
background-color:#ddd;
}

.textClass{ 
    font-weight:bold; 
}

input:focus {
    outline: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table border="1" id="navigate">
    <thead>
            <th> CELL 1</th>
            <th> CELL 2</th>
            <th> CELL 3</th>
            <th> CELL 4</th>
            <th> CELL 5</th>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>

    </tbody>
</table>

<br><br>

<table border="1" id="table2">
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
    <tbody>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
        <tr>
             <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>

    </tbody>
</table>

示例演示请引用此链接。

DEMO HERE

Answer 1

经过一番艰苦的研究，找到了正确的解决方案。由于我们无法在任何其他表的 TD 中单击:我们需要更改查找 td 索引的方式。

目前是这样的:

$(this).closest('table tbody').find('td').index(this);

这总是返回第一个表 td 索引。

下面的代码有助于找到当前焦点所在的 TD 的确切索引:

$('table td').index(this);

虽然它看起来是一条简单的线.. 小而巨大的研究使它变得那么小...

Working DEMO