使用箭頭鍵瀏覽帶有輸入文本的兩個HTML表

Question

在上一篇文章中 ，我問過如何使用箭頭鍵瀏覽表格單元格。 現在，我正在嘗試創建另一個表，該表的行為與第一個表相同。

如何實現呢？

這是我到目前為止的內容：

 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> 

請參考此鏈接以獲取示例演示。

此處演示

Answer 1

經過一番艱苦的研究，它找到了正確的解決方案。 由於我們無法在其他任何表的TD中單擊：我們需要更改查找td索引的方式。

當前為：

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

這總是返回第一個表的td索引。

下面的代碼有助於找到當前焦點所在的TD的准確索引：

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

雖然看起來很簡單，但是研究卻使它變得那么小。

工作演示

Answer 2

在 $('td').click 發送表 id

$('td').click(function() {
    active = $(this).closest('table tbody').find('td').index(this);
    var tableid=$(this).closest('table').attr('id');
    console.log(tableid);
    rePosition(tableid);
});

和更改函數 rePosition()

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

現場演示 在這里

片段示例

 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); var tableid=$(this).closest('table').attr('id'); console.log(tableid); rePosition(tableid); }); 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(tableid) { console.log(active); $('.active').removeClass('active'); $('#'+tableid+' tbody tr td').eq(active).addClass('active'); $('#'+tableid+' tbody tr td').find('input').removeClass('textClass'); $('#'+tableid+' tbody tr td').eq(active).find('input').addClass('textClass'); $('#'+tableid+' tbody tr td').eq(active).find('input').select(); var input = $('#'+tableid+' tbody tr td').eq(active).find('input').focus(); scrollInView(tableid); } function scrollInView(tableid) { var target = $('#'+tableid+' 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.9.1/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> 

Answer 3

試試這個演示

如果有兩個或更多表...使用Class識別所有表

我已經編寫了class="tblnavigate"以在Javascript中調用表格單元格。

因此，重新定位函數如下所示：

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

更新：

退格鍵必須具有其功能，因此，在keydown函數中將其排除為

if ((!(/[a-zA-Z0-9-_ ]/.test(inp) || e.keyCode == 96)) && e.keyCode != 8){ ... }

更新的演示

Answer 4

用下面的代碼替換您的函數並檢查：

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

檢查更新的演示： 單擊此處

Answer 5

我在最近的項目中使用了它，並且效果很好： https ： //gist.github.com/krcourville/7309218