jQuery Girl
  1. jQuery Girl
  3. Utilisez les touches fléchées pour naviguer dans un tableau HTML
Intereting Posts
Comment puis-je exécuter les animations une par une? Quelle est la différence entre jQuery off () et unbind () Les doubles frontières doivent fusionner les CSS Comment activer / désactiver bootstrap selectpicker by ickeck Odd jQuery problem – Demande Ajax à un programme C ne fonctionnant pas correctement Formulaire de publication ASP.NET MVC Jquery Ajax sérialiser? Je ne peux pas arrêter une requête ajax avec jQuery et la fonction abort () Gardez et ses enfants concentrés jusqu’à ce que le focus soit terminé sur Mettre à jour la sélection déroulante avec la sélection du bouton radio à l’aide de jQuery Liste compressible à l’aide de JQuery insérer l’élément dans deux div Comment append une div en cliquant sur un bouton dans jQuery? Ouvrir une fenêtre popup depuis un autre popup parsingr html dans cdata en utilisant jquery ou javascript Valider les champs ajoutés dynamicment

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

afin de le modifier. Je capture l’événement click avec jQuery et affiche une boîte de dialog pour le modifier. J’aimerais que l’utilisateur puisse utiliser les touches fléchées pour naviguer dans chaque cellule, le fond de la cellule css changeant pour indiquer le focus, et un clic sur la touche Entrée déclencherait l’événement de dialog jQuery. J’utilise jQuery 1.9.

Voici un jsfiddle de fondamentalement 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.

Ci-dessous, une solution JavaScript vanille utilisant l’événement onkeydown et les propriétés previousElementSibling et nextElementSibling .

https://jsfiddle.net/rh5aoxsL/

Le problème lié à l’ utilisation de tabindex est que vous ne devez pas naviguer comme vous le feriez dans Excel et que vous pouvez naviguer loin de la feuille de calcul elle-même.

Le HTML 

 
  
 1 2 3 4 
 
 5 6 7 8 
 
 9 10 11 12 
 
 13 14 15 16

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

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 atsortingbuer un atsortingbut tabindex à chaque

pour permettre la navigation.

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

Le HTML: 

 
  
 Col 1 Col 2 Col 3 Col 4 Col 5 Col 6 Col 7 Col 8 
   
 1 2 3 4 5 6 7 8 
 
 10 11 12 13 14 15 16 17

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