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

【问题标题】：Navigate table cell using arrow key and ignore disabled cell使用箭头键导航表格单元格并忽略禁用的单元格
【发布时间】：2016-12-01 05:18:08
【问题描述】：

我有一张像 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>

【问题讨论】：

您的 HTML 中是否有任何 已禁用 单元格。我什么都看不到！
我在绑定文本框后端时使用 javascript 放置了 disable 属性。
$("#input1, #input3").prop("disabled", true);我把它放在重新定位功能上。我想我放错了:(
reposition 在td 上被调用点击...如果您确定要禁用哪个TD.. 您应该在document.ready() 事件上进行此操作
我尝试这样做，但问题仍然是当我输入文本时，值正在添加到可编辑单元格上。

标签： javascript jquery html css

【解决方案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;
            }
        }
    }

Complete Solution

而且，如果您想明确关注已禁用的单元格，您可以使用鼠标单击。

【讨论】：

【解决方案2】：

您只需要在重新计算方法中修改查找选择器。更新了sn-p。而不是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>

【讨论】：