矢印キーを使用してHTMLテーブルをナビゲートする

Question

HTMLテーブルを使用して非常に基本的なスプレッドシートを作成しました。それを編集するためにユーザーがマウスを使用してすべての<td>をクリックする必要があることを除いて、それは完全に機能します。 jQueryでクリックイベントをキャプチャし、編集するためのダイアログを表示しています。ユーザーが矢印キーを使用して各セルに移動できるようにしたいと思います。セルのcss背景がフォーカスを示すように変化し、EnterキーをクリックするとjQueryダイアログイベントがトリガーされます。私はjQuery 1.9を使用しています。

これが基本的に私が持っているものの jsfiddle です。

現在選択されているセルをどのように保存して、マウスでセルをクリックしてから矢印キーを使用すると、「現在の」セルから移動するのですか？

ありがとう。

Answer 1

以下は、onkeydownイベントを使用し、previousElementSiblingを使用するVanilla JavaScriptソリューションですおよびnextElementSiblingプロパティ。

https://jsfiddle.net/rh5aoxsL/

tabindexを使用する際の問題は、Excelのように移動できず、スプレッドシート自体から離れて移動できることです。

HTML

<table>
  <tbody>
    <tr>
      <td id='start'>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
  border: 1px solid black;
}
table td {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

JavaScript

var start = document.getElementById('start');
start.focus();
start.style.backgroundColor = 'green';
start.style.color = 'white';

function dotheneedful(sibling) {
  if (sibling != null) {
    start.focus();
    start.style.backgroundColor = '';
    start.style.color = '';
    sibling.focus();
    sibling.style.backgroundColor = 'green';
    sibling.style.color = 'white';
    start = sibling;
  }
}

document.onkeydown = checkKey;

function checkKey(e) {
  e = e || window.event;
  if (e.keyCode == '38') {
    // up arrow
    var idx = start.cellIndex;
    var nextrow = start.parentElement.previousElementSibling;
    if (nextrow != null) {
      var sibling = nextrow.cells[idx];
      dotheneedful(sibling);
    }
  } else if (e.keyCode == '40') {
    // down arrow
    var idx = start.cellIndex;
    var nextrow = start.parentElement.nextElementSibling;
    if (nextrow != null) {
      var sibling = nextrow.cells[idx];
      dotheneedful(sibling);
    }
  } else if (e.keyCode == '37') {
    // left arrow
    var sibling = start.previousElementSibling;
    dotheneedful(sibling);
  } else if (e.keyCode == '39') {
    // right arrow
    var sibling = start.nextElementSibling;
    dotheneedful(sibling);
  }
}

Answer 2

他のいくつかの投稿で見つけた情報に基づいて、私はそれを理解しました。私はそれをすべて一緒に転がしました、そして結果は完璧です。

注：ナビゲーションを許可するには、すべての<td>にtabindex属性を配置する必要があります。

これが the jsfiddle です。同じコードを以下に示します。

HTML：

<table>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 5</th>
            <th>Col 6</th>
            <th>Col 7</th>
            <th>Col 8</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td tabindex="1">1</td>
            <td tabindex="2">2</td>
            <td tabindex="3">3</td>
            <td tabindex="4">4</td>
            <td tabindex="5">5</td>
            <td tabindex="6">6</td>
            <td tabindex="7">7</td>
            <td tabindex="8">8</td>
        </tr>
        <tr>
            <td tabindex="10">10</td>
            <td tabindex="11">11</td>
            <td tabindex="12">12</td>
            <td tabindex="13">13</td>
            <td tabindex="14">14</td>
            <td tabindex="15">15</td>
            <td tabindex="16">16</td>
            <td tabindex="17">17</td>
        </tr>
    </tbody>
</table>

<div id="edit">
    <form>
        <input type="text" id="text" value="To edit..." />
        <input type="submit" value="Save" />
    </form>
</div>

CSS：

* {
    font-size: 12px;
    font-family: 'Helvetica', Arial, Sans-Serif;
    box-sizing: border-box;
}

table, th, td {
    border-collapse:collapse;
    border: solid 1px #ccc;
    padding: 10px 20px;
    text-align: center;
}

th {
    background: #0f4871;
    color: #fff;
}

tr:nth-child(2n) {
    background: #f1f1f1;
}
td:hover {
    color: #fff;
    background: #CA293E;
}
td:focus {
    background: #f44;
}

.editing {
    border: 2px dotted #c9c9c9;
}

#edit { 
    display: none;
}

JQuery：

var currCell = $('td').first();
var editing = false;

// User clicks on a cell
$('td').click(function() {
    currCell = $(this);
    edit();
});

// Show edit box
function edit() {
    editing = true;
    currCell.toggleClass("editing");
    $('#edit').show();
    $('#edit #text').val(currCell.html());
    $('#edit #text').select();
}

// User saves edits
$('#edit form').submit(function(e) {
    editing = false;
    e.preventDefault();
    // Ajax to update value in database
    $.get('#', '', function() {
        $('#edit').hide();
        currCell.toggleClass("editing");
        currCell.html($('#edit #text').val());
        currCell.focus();
    });
});

// User navigates table using keyboard
$('table').keydown(function (e) {
    var c = "";
    if (e.which == 39) {
        // Right Arrow
        c = currCell.next();
    } else if (e.which == 37) { 
        // Left Arrow
        c = currCell.prev();
    } else if (e.which == 38) { 
        // Up Arrow
        c = currCell.closest('tr').prev().find('td:eq(' + 
          currCell.index() + ')');
    } else if (e.which == 40) { 
        // Down Arrow
        c = currCell.closest('tr').next().find('td:eq(' + 
          currCell.index() + ')');
    } else if (!editing && (e.which == 13 || e.which == 32)) { 
        // Enter or Spacebar - edit cell
        e.preventDefault();
        edit();
    } else if (!editing && (e.which == 9 && !e.shiftKey)) { 
        // Tab
        e.preventDefault();
        c = currCell.next();
    } else if (!editing && (e.which == 9 && e.shiftKey)) { 
        // Shift + Tab
        e.preventDefault();
        c = currCell.prev();
    } 

    // If we didn't hit a boundary, update the current cell
    if (c.length > 0) {
        currCell = c;
        currCell.focus();
    }
});

// User can cancel edit by pressing escape
$('#edit').keydown(function (e) {
    if (editing && e.which == 27) { 
        editing = false;
        $('#edit').hide();
        currCell.toggleClass("editing");
        currCell.focus();
    }
});

Answer 3

このコードは、矢印キーを使用してテーブルをナビゲートするのに適切に役立ちます。すべてのセルには、f2キーを押してセルを編集する場合にテキストボックスがあります。

$(document).ready(function()
                {
                        var tr,td,cell;
                        td=$("td").length;
                        tr=$("tr").length;
                        cell=td/(tr-1);//one tr have that much of td
                        //alert(cell);
                        $("td").keydown(function(e)
                        {
                                switch(e.keyCode)
                                {
                                
                                        case 37 : var first_cell = $(this).index();
                                                          if(first_cell==0)
                                                          {
                                                                $(this).parent().prev().children("td:last-child").focus();
                                                          }
                                                          else
                                                                $(this).prev("td").focus();break;//left arrow
                                        case 39 : var last_cell=$(this).index();
                                                          if(last_cell==cell-1)
                                                          {
                                                                $(this).parent().next().children("td").eq(0).focus();
                                                          }
                                                          $(this).next("td").focus();break;//right arrow
                                        case 40 : var child_cell = $(this).index();     
                                                          $(this).parent().next().children("td").eq(child_cell).focus();break;//down arrow
                                        case 38 : var parent_cell = $(this).index();
                                                          $(this).parent().prev().children("td").eq(parent_cell).focus();break;//up arrow
                                }
                                if(e.keyCode==113)
                                {
                                        $(this).children().focus();
                                }
                        });
                        $("td").focusin(function()
                        {
                                $(this).css("outline","solid steelblue 3px");//animate({'borderWidth': '3px','borderColor': '#f37736'},100);
                        });
                        $("td").focusout(function()
                        {
                                $(this).css("outline","none");//.animate({'borderWidth': '1px','borderColor': 'none'},500);
                        });
                        
                });

input
                {
                        width:100%;
                        border:none;    
                }

<html>
        <head>
        <title>Web Grid Using Arrow Key</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
<body>
                <h1>Web Grid Table</h1>
                <div id="abc" class="table_here" role="grid">
                        <table class="table" border="1" style="width:50%; padding:15px;">
                                <tr>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Mobile</th>
                                        <th>Address</th>
                                </tr>
                                <tr role="row">
                                        <td role="gridcell" tabindex="0" aria-label="name" aria-describedby="f2_key">
                                                <input type="text" class="link" tabindex="-1" name="name" aria-label="name">
                                        </td>
                                        <td role="gridcell" tabindex="-1" aria-label="Email Id" aria-describedby="f2_key">
                                                <input type="text" class="link" tabindex="-1" name="email" aria-label="email">
                                        </td>
                                        <td role="gridcell" tabindex="-1" aria-label="Mobile Number" aria-describedby="f2_key">
                                                <input type="text" class="link" tabindex="-1" name="mob" aria-label="mobile">
                                        </td>
                                        <td role="gridcell" tabindex="-1" aria-label="Address" aria-describedby="f2_key">
                                                <input type="text" class="link" tabindex="-1" name="add" aria-label="address">
                                        </td>
                                        <p id="f2_key" style="display:none;" aria-hidden="true">Press F2 Key To Edit cell</p>
                                </tr>
                                <tr role="row">
                                        <td role="gridcell" tabindex="-1" aria-label="name" aria-describedby="f2_key">
                                                <input type="text" tabindex="-1" class="link" name="name">
                                        </td>
                                        <td role="gridcell" tabindex="-1" aria-label="Email Id" aria-describedby="f2_key">
                                                <input type="text" tabindex="-1" class="link" name="email">
                                        </td>
                                        <td role="gridcell" tabindex="-1" aria-label="Mobile Number" aria-describedby="f2_key">
                                                <input type="text" tabindex="-1" class="link" name="mob">
                                        </td>
                                        <td role="gridcell" tabindex="-1" aria-label="Address" aria-describedby="f2_key">
                                                <input type="text" tabindex="-1" class="link" name="add">
                                        </td>
                                </tr>
                                                                <tr role="row">
                                        <td role="gridcell" tabindex="-1" aria-label="name" aria-describedby="f2_key">
                                                <input type="text" tabindex="-1" class="link" name="name">
                                        </td>
                                        <td role="gridcell" tabindex="-1" aria-label="Email Id" aria-describedby="f2_key">
                                                <input type="text" tabindex="-1" class="link" name="email">
                                        </td>
                                        <td role="gridcell" tabindex="-1" aria-label="Mobile Number" aria-describedby="f2_key">
                                                <input type="text" tabindex="-1" class="link" name="mob">
                                        </td>
                                        <td role="gridcell" tabindex="-1" aria-label="Address" aria-describedby="f2_key">
                                                <input type="text" tabindex="-1" class="link" name="add">
                                        </td>
                                </tr>
      </table>
    </div>
   </body>
</html>

Answer 4

矢印キーに焦点を合わせるために、私はここに投稿されたさまざまなソリューションの束をまとめることになり、これを思いつきました。なぜ.next（）または.prev（）が行に対して機能しないのかはまだわかりません...何らかの理由で.prevAllと.nextAllが必要であるように見えました：

   $("input").keydown(function (e) {
    var textInput = this;
    var val = textInput.value;
    var isAtStart = false, isAtEnd = false;
    var cellindex = $(this).parents('td').index();
    if (typeof textInput.selectionStart == "number") {
        // Non-IE browsers


        isAtStart = (textInput.selectionStart == 0);
        isAtEnd = (textInput.selectionEnd == val.length);
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 branch
        textInput.focus();
        var selRange = document.selection.createRange();
        var inputRange = textInput.createTextRange();
        var inputSelRange = inputRange.duplicate();
        inputSelRange.moveToBookmark(selRange.getBookmark());
        isAtStart = inputSelRange.compareEndPoints("StartToStart", inputRange) == 0;
        isAtEnd = inputSelRange.compareEndPoints("EndToEnd", inputRange) == 0;
    }

      // workaround for text inputs of 'number' not working in Chrome... selectionStart/End is null.  Can no longer move cursor left or right inside this field.
    if (textInput.selectionStart == null) {
        if (e.which == 37 || e.which == 39) {

            isAtStart = true;
            isAtEnd = true;
        }
    }

    if (e.which == 37) {
        if (isAtStart) {
            $(this).closest('td').prevAll('td').find("input").focus();
        }
    }
    if (e.which == 39) {

        if (isAtEnd) {
            $(this).closest('td').nextAll('td').find("input").not(":hidden").first().focus();
        }
    }
    if (e.which == 40) {
              $(e.target).closest('tr').nextAll('tr').find('td').eq(cellindex).find(':text').focus();
    }
    if (e.which == 38) {
    $(e.target).closest('tr').prevAll('tr').first().find('td').eq(cellindex).find(':text').focus();
    }

});