web-dev-qa-db-fra.com

Utilisez les touches fléchées pour naviguer dans un tableau HTML

J'ai créé une feuille de calcul très basique à l'aide d'un tableau HTML. Cela fonctionne parfaitement, sauf que l'utilisateur doit utiliser la souris pour cliquer sur chaque <td> afin de le modifier. Je capture l'événement click avec jQuery et affiche une boîte de dialogue pour l'éditer. J'aimerais que l'utilisateur puisse utiliser les touches fléchées pour naviguer dans chaque cellule, l'arrière-plan de la cellule changeant pour indiquer le focus, et le fait de cliquer sur la touche Entrée déclencherait l'événement de dialogue jQuery. J'utilise jQuery 1.9.

Voici un jsfiddle de base ce que j'ai.

Comment enregistrez-vous la cellule actuellement sélectionnée, de sorte que lorsque vous cliquez sur une cellule avec la souris, puis utilisez les touches de direction, elle navigue à partir de la cellule "actuelle"?

Merci.

jqueryhtmlcsshtml-tablespreadsheet
8
Lane

Vous trouverez ci-dessous une solution JavaScript Vanilla utilisant l’événement onkeydown et les propriétés previousElementSibling et nextElementSibling .

https://jsfiddle.net/rh5aoxsL/

Le problème avec tabindex est que vous ne pouvez pas naviguer comme vous le feriez dans Excel et que vous pouvez naviguer loin de la feuille de calcul elle-même.

Le 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>

Le CSS

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

Le 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);
  }
}
11
huehuehue

Je l'ai compris, sur la base des informations que j'ai trouvées sur quelques autres posts. J'ai tout roulé ensemble et les résultats sont parfaits.

Remarque: Vous devez définir un attribut tabindex sur chaque <td> pour autoriser la navigation.

Voici le jsfiddle . Le même code est détaillé ci-dessous.

Le 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>

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

Le 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();
    }
});
7
Lane

Ce code vous aidera correctement à naviguer dans le tableau en utilisant les touches fléchées. Dans chaque cellule, il y a des zones de texte si vous souhaitez modifier, appuyez sur f2 et modifiez la cellule.

$(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>
0
Madhav Saraf