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;
$('#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();
});
});
// User navigates table using keyboard
$('table').keydown(function (e) {
var c = "";
if (e.which == 39) {
// Right Arrow
c = ();
} else if (e.which == 37) {
// Left Arrow
c = currCell.prev();html导航源码
} 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 = ();
} 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.focus();
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。