Question

我有一个html表，可以在其中写入任何内容，并且制表符有效。但是我也试图使上下箭头也起作用。我在线尝试了一些脚本，但由于特定情况下无法执行任何脚本。像：

$(document).keydown(function(e){
    switch(e.which){
        case 37: // left arrow            
            $(e.target).closest('td').nextAll('td.editable:first').find('div');
            break;
        case 39: // right arrow
            $(e.target).closest('td').nextAll('td.editable:first').find('div');
            break;
        default: // exit for other keys
            return;
    }
    e.preventDefault(); // prevent default action
});

table{
    border: 1px solid black;
    table-layout: fixed;    
}
tr {
    height: 28px; 
    width: 30px;
}
td{
    border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style="width: 600px;border: 1px solid black;">
<tbody>
<tr style="height: 16px;">
<td colspan="6" style="text-align: center; height: 16px; border: 1px solid black;">
<p><strong>Groups</strong></p>
</td>
</tr>
<tr style="border: 1px; border-color: red;">
<td><p style="text-align: left;"><em><strong>Areas</strong></em></p></td>
<td style="border-color: red;border: 1px solid red;"><div  class="editable"></div></td>
<td style="border-color: red;border: 1px solid red;"><div  class="editable"></div></td>
<td style="border-color: red;border: 1px solid red;"><div  class="editable"></div></td>
<td style="border-color: red;border: 1px solid red;"><div  class="editable"></div></td>
<td style="border-color: red;border: 1px solid red;"><div  class="editable"></div></td>
</tr>
<tr>
<td style="border-color: red;border: 1px solid red;"><div class="editable"></div></td>
<td><div class="editable"></div></td>
<td><div class="editable"></div></td>
<td><div class="editable"></div></td>
<td><div class="editable"></div></td>
<td><div class="editable"></div></td>
</tr>
</tbody>
</table>

有没有简单的脚本可以使箭头在此表中使用？

Answer 1

使用<td>或<div>元素的类名，这会容易得多，但是在没有它们的情况下，这是一个解决方案。有关更多信息，请参见https://api.jquery.com/category/traversing/tree-traversal/。

另外，使用.focus()聚焦该字段：

$(document).keydown(function(e) {

  switch (e.which) {
    case 37: // left arrow       
      $(e.target).parent().prev().find('div').focus()
      break;
    case 39: // right arrow
      $(e.target).parent().next().find('div').focus()
      break;
    case 40: // down
      $(e.target).parent().parent().next().children().eq($(e.target).parent().index()).find('div').focus()
      break;
    case 38: // up
      $(e.target).parent().parent().prev().children().eq($(e.target).parent().index()).find('div').focus()
      break;
    default: // exit for other keys
      return;
  }

});

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<table style="width: 1400px;border: 1px solid black;">
  <tbody>
    <tr style="height: 16px;">
      <td colspan="6" style="text-align: center; width: 979px; height: 16px; border: 1px solid black;">
        <p><strong>Groups</strong></p>
      </td>
    </tr>
    <tr border: 1px; border-color: red; ">
<td><p style="text-align: left; "><em><strong>Areas</strong></em></p></td>
<td style="border-color: red;border: 1px solid red; "><div contenteditable>fgjhdfjdg</div></td>
<td style="border-color: red;border: 1px solid red; "><div contenteditable><sadffsf</div></td>
<td style="border-color: red;border: 1px solid red; "><div contenteditable>zxcvxzcv</div></td>
<td style="border-color: red;border: 1px solid red; "><div contenteditable>cvbnvbn</div></td>
<td style="border-color: red;border: 1px solid red; "><div contenteditable>REQZX</div></td>
</tr>
<tr>
<td style="border-color: red;border: 1px solid red; "><div contenteditable>CVBXCB</td>
<td><div contenteditable>HJM,HJ</td>
<td><div contenteditable>ASDFAS</td>
<td><div contenteditable>NBCN</td>
<td><div contenteditable>RTWETB</td>
<td><div contenteditable>XCVBXCB</td>
</tr>
</tbody>
</table>

<style>
table{
    border: 1px solid black;
    table-layout: fixed;    
}
tr {
    height: 28px; 
    width: 100px;
}
td{
    border:1px solid #000;
}
</style>

Answer 2

使用所有4个箭头键会更好吗？

使用 .next() 向下↓和向右→箭头键。
使用 .prev() 向上↑并向左←箭头键。
使用 .index()
使用 .parent() 查找<td>和<tr>（如果来自 .closest()，则可以找到e.target 到<tr>）。
使用 .eq() 和返回索引号.index()在相邻的<td>中找到相同位置的<tr>。 / p>

困惑吗？ ...我也可以看看演示。

演示

评论中评论的详细信息

/* Don't know if you already made the divs contenteditable but
|| if you haven't yet, here's a simple way of doing it.
*/
$('.editable').attr('contenteditable', true);

// Delegate the keydown event to Document Object
$(document).on('keydown', function(e) {
  // Prevent default action
  e.preventDefault();
  /* Establish references to all elements that could possibly be
  || involved. 
  */
  // Reference the <div> being typed into
  var start = $(e.target);
  // Reference the <td> that the <div> is the child of
  var cell = start.parent('td');
  // Reference the <tr> that the <td> is child of 
  var row = cell.parent('tr');
  // Determine the index position of the <td>
  var idx = row.find('td').index(cell);
  //console.log(idx);

  switch (e.which) {
    // Up 
    case 38:
      /* Find the <tr> that's above the current <tr>
      || Find the <td> in the same position as current <td>
      || Find the <div> in that <td> 
      */
      row.prev('tr').find('td').eq(idx).find('.editable').focus();
      break;
      // Left
    case 37:
      /* Find the <td> that's to the left of current <td>
      || Find the <div> within that <td>
      */
      cell.prev('td').find('.editable').focus();
      break;
      // Right
    case 39:
      /* Find the <td> that's to the right of current <td>
      || Find the <div> within that <td>
      */
      cell.next('td').find('.editable').focus();
      break;
      // Down
    case 40:
      /* Find the <tr> that's below the current <tr>
      || Find the <td> in the same position as current <td>
      || Find the <div> in that <td> 
      */
      row.next('tr').find('td').eq(idx).find('.editable').focus();
      break;
      // Ignore other keys
    default:
      return;
  }
  // Stop event bubbling
  e.stopPropagation();
});

table {
  border: 1px solid black;
  table-layout: fixed;
}

tr {
  height: 28px;
  width: 30px;
}

td {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style="width: 600px;border: 1px solid black;">
  <tbody>
    <tr style="height: 16px;">
      <td colspan="6" style="text-align: center; height: 16px; border: 1px solid black;">
        <p><strong>Groups</strong></p>
      </td>
    </tr>
    <tr style="border: 1px; border-color: red;">
      <td>
        <p style="text-align: left;"><em><strong>Areas</strong></em></p>
      </td>
      <td style="border-color: red;border: 1px solid red;">
        <div class="editable"></div>
      </td>
      <td style="border-color: red;border: 1px solid red;">
        <div class="editable"></div>
      </td>
      <td style="border-color: red;border: 1px solid red;">
        <div class="editable"></div>
      </td>
      <td style="border-color: red;border: 1px solid red;">
        <div class="editable"></div>
      </td>
      <td style="border-color: red;border: 1px solid red;">
        <div class="editable"></div>
      </td>
    </tr>
    <tr>
      <td style="border-color: red;border: 1px solid red;">
        <div class="editable"></div>
      </td>
      <td>
        <div class="editable"></div>
      </td>
      <td>
        <div class="editable"></div>
      </td>
      <td>
        <div class="editable"></div>
      </td>
      <td>
        <div class="editable"></div>
      </td>
      <td>
        <div class="editable"></div>
      </td>
    </tr>
  </tbody>
</table>

如何在contenteditable

2 个答案:

演示