DataTable按下键选择扩展/导航
DataTable Select Extension / Navigation with keydown
我正在使用Datatable,并且我已经在中实现了Select()扩展,我想实现一个函数,允许用户使用keyup和keydown在表上导航,但我不知道如何做到这一点。我试过这个,但只删除了工作:
$('#example tbody').on( 'click', 'tr', function () {
var tr = $(this);
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
//on keypress within tr
$(document).keydown(function(e) {
var tabla = document.getElementById("example");
var fila = tabla.getElementsByClassName('odd selected');
var fila2 = tabla.getElementsByClassName('even selected');
if (e.keyCode == 40){ //arrow down
tr.next().addClass('selected');
table.$('tr.selected').removeClass('selected');
}
if (e.keyCode == 38){ //arrow up
tr.prev().addClass('selected');
table.$('tr.selected').removeClass('selected');
}
})
} );
有人能帮我吗?
编辑:这是我的HTML
<button id="addRow">Insertar fila</button>
<button id="saveData">Guardar datos</button>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-condensed" width="100%" id="example">
<thead>
<tr>
<th width="10%">NIF/NIE</th>
<th width="10%">1er Apellido</th>
<th width="10%">2do Apellido</th>
<th width="10%">Nombre</th>
<th width="10%">Sexo</th>
<th width="10%">Fecha Nacimiento</th>
<th width="10%">Fecha Contrato</th>
<th width="10%">Demandante empleo larga duración</th>
<th width="10%">Tipo Contrato</th>
<th width="10%">% Jornada</th>
<th width="10%">Discap.</th>
<th width="10%">Causas Archivo. (1)</th>
<th width="10%">Aut. SCSP</th>
<th width="10%">Imp.Solic.</th>
<th width="10%">Sust.</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
我正在使用ajax 添加数据
因为要删除和添加selected
类的行应该按相反的顺序排列,所以以下是代码中需要更改的内容
if (e.keyCode == 40){ //arrow down
// original lines
//tr.next().addClass('selected');
//table.$('tr.selected').removeClass('selected');
// new lines, with order changed
table.$('tr.selected').removeClass('selected');
tr.next().addClass('selected');
}
if (e.keyCode == 38){ //arrow up
// same here switch the lines
table.$('tr.selected').removeClass('selected');
tr.prev().addClass('selected');
}
固定!这是我现在的代码:$('#example tbody').on('click','tr',function(){
var tr = $(this);
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
//on keypress within tr
$(document).keydown(function(e) {
if (e.keyCode == 40){ //arrow down
table.$('tr.selected').removeClass('selected');
tr.next().addClass('selected');
tr = table.$('tr.selected'); //This was what i needed
}
if (e.keyCode == 38){ //arrow up
table.$('tr.selected').removeClass('selected');
tr.prev().addClass('selected');
tr = table.$('tr.selected'); // again here
}
})
我知道这不是最好的代码,但至少它能工作:)
相关文章:
- Node.js v6.2.0类扩展不是函数错误
- 扩展移相器按钮类不工作
- chrome扩展中的navigator.geolocation.getCurrentPosition
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- chrome扩展更改主机/域警告
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- TableExport jquery插件:文件名和扩展名问题
- DataTable按下键选择扩展/导航
- Django导航:扩展与innerHTML
- 如何使用Firefox扩展模拟特定页面的“位置”、“导航器”和好友
- 使用扩展/收缩部分/栏开发网站,同时滚动导航
- 在导航到新页面时,使 Chrome 扩展程序弹出窗口保持打开状态
- 如何通过扩展命令显示/隐藏chrome的选项卡或导航按钮
- Firefox扩展+TCP:“;导航器未定义”;
- 引导3导航条崩溃不扩展
- Chrome扩展只运行在刷新,而不是在页面导航
- 阻止由Chrome扩展中的onBeforeNavigate事件指示的导航,但不是非导航请求
- Chrome扩展导航到URL
- 如何保持打开火狐扩展弹出导航点击按钮