使用箭头键导航表格单元格并忽略禁用的单元格

Question

我有一张像excel一样的桌子。 允许用户使用箭头键导航整个表。 但是当我试图禁用它的一些文本框时，它仍然捕获已禁用的单元格，当我尝试输入文本时，该值正在添加到可编辑单元格上。 我怎么能解决这个问题？ 谢谢。

这是我到目前为止所拥有的。

 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() { $("#input1, #input3").prop("disabled", true); 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/2.1.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 id="input1" type="text" value="CELL 1" /> </td> <td> <input id="input2" type="text" value="CELL 2" /> </td> <td> <input id="input3" type="text" value="CELL 3" /> </td> <td> <input id="input4" type="text" value="CELL 4" /> </td> <td> <input id="input5" type="text" value="CELL 5" /> </td> </tr> <tr> <td> <input id="input1" type="text" value="CELL 1" /> </td> <td> <input id="input2" type="text" value="CELL 2" /> </td> <td> <input id="input3" type="text" value="CELL 3" /> </td> <td> <input id="input4" type="text" value="CELL 4" /> </td> <td> <input id="input5" type="text" value="CELL 5" /> </td> </tr> <tr> <td> <input id="input1" type="text" value="CELL 1" /> </td> <td> <input id="input2" type="text" value="CELL 2" /> </td> <td> <input id="input3" type="text" value="CELL 3" /> </td> <td> <input id="input4" type="text" value="CELL 4" /> </td> <td> <input id="input5" type="text" value="CELL 5" /> </td> </tr> <tr> <td> <input id="input1" type="text" value="CELL 1" /> </td> <td> <input id="input2" type="text" value="CELL 2" /> </td> <td> <input id="input3" type="text" value="CELL 3" /> </td> <td> <input id="input4" type="text" value="CELL 4" /> </td> <td> <input id="input5" type="text" value="CELL 5" /> </td> </tr> </tbody> <table border="1" id="table2"> <tr> <td> <input type="text" id="inputb1" value="CELL 1" /> </td> <td> <input type="text" id="inputb2" value="CELL 2" /> </td> <td> <input type="text" id="inputb3" value="CELL 3" /> </td> <td> <input type="text" id="inputb4" value="CELL 4" /> </td> <td> <input type="text" id="inputb5" value="CELL 5" /> </td> </tr> <tbody> <tr> <td> <input type="text" id="inputb1" value="CELL 1" /> </td> <td> <input type="text" id="inputb2" value="CELL 2" /> </td> <td> <input type="text" id="inputb3" value="CELL 3" /> </td> <td> <input type="text" id="inputb4" value="CELL 4" /> </td> <td> <input type="text" id="inputb5" value="CELL 5" /> </td> </tr> <tr> <td> <input type="text" id="inputb1" value="CELL 1" /> </td> <td> <input type="text" id="inputb2" value="CELL 2" /> </td> <td> <input type="text" id="inputb3" value="CELL 3" /> </td> <td> <input type="text" id="inputb4" value="CELL 4" /> </td> <td> <input type="text" id="inputb5" value="CELL 5" /> </td> </tr> <tr> <td> <input type="text" id="inputb1" value="CELL 1" /> </td> <td> <input type="text" id="inputb2" value="CELL 2" /> </td> <td> <input type="text" id="inputb3" value="CELL 3" /> </td> <td> <input type="text" id="inputb4" value="CELL 4" /> </td> <td> <input type="text" id="inputb5" value="CELL 5" /> </td> </tr> <tr> <td> <input type="text" id="inputb1" value="CELL 1" /> </td> <td> <input type="text" id="inputb2" value="CELL 2" /> </td> <td> <input type="text" id="inputb3" value="CELL 3" /> </td> <td> <input type="text" id="inputb4" value="CELL 4" /> </td> <td> <input type="text" id="inputb5" value="CELL 5" /> </td> </tr> </tbody> </table> 

Answer 1

根据要求，您可以使用

find('input:not(:disabled)')

这样，您可以跳过禁用的单元格并直接关注下一个启用的单元格。 例：

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 ($('.tblnavigate tbody tr td').eq(temp).find('input:not(:disabled)').length != 0) {
                active = temp;
                break;
            }
        }
    }

完整解决方案

而且，如果您想明确关注Disabled Cell，可以使用鼠标单击它。

Answer 2

您只需要在重新计算方法中修改查找选择器。 更新了代码段。 而不是find('input')使用find('input:not(:disabled)')

希望这可以帮助。

 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:not(:disabled)').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:not(:disabled)').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:not(:disabled)').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:not(:disabled)').length != 0) { active = temp; break; } } } } function rePosition() { $("#input1, #input3").prop("disabled", true); 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/2.1.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 id="input1" type="text" value="CELL 1" /> </td> <td> <input id="input2" type="text" value="CELL 2" /> </td> <td> <input id="input3" type="text" value="CELL 3" /> </td> <td> <input id="input4" type="text" value="CELL 4" /> </td> <td> <input id="input5" type="text" value="CELL 5" /> </td> </tr> <tr> <td> <input id="input1" type="text" value="CELL 1" /> </td> <td> <input id="input2" type="text" value="CELL 2" /> </td> <td> <input id="input3" type="text" value="CELL 3" /> </td> <td> <input id="input4" type="text" value="CELL 4" /> </td> <td> <input id="input5" type="text" value="CELL 5" /> </td> </tr> <tr> <td> <input id="input1" type="text" value="CELL 1" /> </td> <td> <input id="input2" type="text" value="CELL 2" /> </td> <td> <input id="input3" type="text" value="CELL 3" /> </td> <td> <input id="input4" type="text" value="CELL 4" /> </td> <td> <input id="input5" type="text" value="CELL 5" /> </td> </tr> <tr> <td> <input id="input1" type="text" value="CELL 1" /> </td> <td> <input id="input2" type="text" value="CELL 2" /> </td> <td> <input id="input3" type="text" value="CELL 3" /> </td> <td> <input id="input4" type="text" value="CELL 4" /> </td> <td> <input id="input5" type="text" value="CELL 5" /> </td> </tr> </tbody> <table border="1" id="table2"> <tr> <td> <input type="text" id="inputb1" value="CELL 1" /> </td> <td> <input type="text" id="inputb2" value="CELL 2" /> </td> <td> <input type="text" id="inputb3" value="CELL 3" /> </td> <td> <input type="text" id="inputb4" value="CELL 4" /> </td> <td> <input type="text" id="inputb5" value="CELL 5" /> </td> </tr> <tbody> <tr> <td> <input type="text" id="inputb1" value="CELL 1" /> </td> <td> <input type="text" id="inputb2" value="CELL 2" /> </td> <td> <input type="text" id="inputb3" value="CELL 3" /> </td> <td> <input type="text" id="inputb4" value="CELL 4" /> </td> <td> <input type="text" id="inputb5" value="CELL 5" /> </td> </tr> <tr> <td> <input type="text" id="inputb1" value="CELL 1" /> </td> <td> <input type="text" id="inputb2" value="CELL 2" /> </td> <td> <input type="text" id="inputb3" value="CELL 3" /> </td> <td> <input type="text" id="inputb4" value="CELL 4" /> </td> <td> <input type="text" id="inputb5" value="CELL 5" /> </td> </tr> <tr> <td> <input type="text" id="inputb1" value="CELL 1" /> </td> <td> <input type="text" id="inputb2" value="CELL 2" /> </td> <td> <input type="text" id="inputb3" value="CELL 3" /> </td> <td> <input type="text" id="inputb4" value="CELL 4" /> </td> <td> <input type="text" id="inputb5" value="CELL 5" /> </td> </tr> <tr> <td> <input type="text" id="inputb1" value="CELL 1" /> </td> <td> <input type="text" id="inputb2" value="CELL 2" /> </td> <td> <input type="text" id="inputb3" value="CELL 3" /> </td> <td> <input type="text" id="inputb4" value="CELL 4" /> </td> <td> <input type="text" id="inputb5" value="CELL 5" /> </td> </tr> </tbody> </table>