html表格排序 箭头,使用箭头键导航HTML表格

Lane..

8

根据我在其他几篇文章中发现的信息,我想出来了.我把它们全部卷起来,结果很完美.

注意:您必须tabindex在每个

上添加一个属性以允许导航.

这是jsfiddle.下面列出了相同的代码.

HTML:

Col 1Col 2Col 3Col 4Col 5Col 6Col 7Col 8

123456781011121314151617

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

}

});