Skins/plugins/datatables/extensions/KeyTable/examples/events.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

	<title>KeyTable example - Events</title>
	<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="../css/dataTables.keyTable.css">
	<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
	<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
	<style type="text/css" class="init">

	</style>
	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
	<script type="text/javascript" language="javascript" src="../js/dataTables.keyTable.js"></script>
	<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
	<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
	<script type="text/javascript" language="javascript" class="init">


function eventMsg ( msg ) {
	var n = document.getElementById('info');
	n.innerHTML += msg+"<br>";
	n.scrollTop = n.scrollHeight;
}

$(document).ready(function() {
	var table = $('#example').DataTable();
	var keys = new $.fn.dataTable.KeyTable( table );

	/* Focus handler for all cells in last column */
	keys.event.focus( 4, null, function( node, x, y ) {
		eventMsg( "Cell "+x+","+y+" focused ('live' event - column)" );
	} );
	
	/* Focus handler for all cells in 8th row */
	keys.event.focus( null, 7, function( node, x, y ) {
		eventMsg( "Cell "+x+","+y+" focused ('live' event - row)" );
	} );
	
	/* Focus using coords. */
	keys.event.focus( 1, 0, function( node ) {
		keys.event.remove.focus( node );
		eventMsg( "Cell 1,0 focus - this event has now been removed" );
	} );
	
	keys.event.focus( 1, 3, function() {
		eventMsg( "Cell 1,3 focus" );
	} );
	
	/* focus with a node */
	keys.event.focus( $('#example tbody tr:eq(2) td:eq(0)')[0], function() {
		eventMsg( "Cell 0,2 focus" );
	} );
	
	/* Blur using a node */
	keys.event.blur( $('#example tbody tr:eq(1) td:eq(2)')[0], function() {