it-swarm.com.ru

Используйте клавиши со стрелками для навигации по таблице HTML

Я создал очень простую электронную таблицу, используя таблицу HTML. Он работает отлично, за исключением того, что пользователь должен использовать мышь для нажатия на каждый <td>, чтобы редактировать его. Я фиксирую событие click с помощью jQuery и отображаю диалог для его редактирования. Я бы хотел, чтобы пользователь мог использовать клавиши со стрелками для перехода к каждой ячейке, при этом фон ячейки css меняется, чтобы указать фокус, а нажатие клавиши Enter вызовет событие диалога jQuery. Я использую jQuery 1.9.

Вот jsfiddle в основном то, что у меня есть.

Как сохранить текущую выбранную ячейку, чтобы при щелчке мышью по ячейке, а затем с помощью клавиш со стрелками она перемещалась из текущей ячейки?

Благодарю.

8
Lane

Ниже представлено решение Vanilla JavaScript, использующее событие onkeydown и использующее свойства previousElementSibling и 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);
  }
}
11
huehuehue

Я понял это, основываясь на информации, которую нашел в нескольких других постах. Я скатал все это вместе, и результаты прекрасны. 

Примечание: Вы должны поместить атрибут tabindex в каждый <td>, чтобы разрешить навигацию.

Вот 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();
    }
});
7
Lane

Этот код правильно поможет вам перемещаться по таблице с помощью клавиш со стрелками . В каждой ячейке есть текстовые поля, если вы хотите отредактировать, нажмите 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>
Надеюсь, это поможет вам .. !!

0
Madhav Saraf