//调用:new tabTableInput("tblGrid","text");
var tabTableInput = function (tableId, inputType) {
var rowInputs = [];
var trs = $("#" + tableId).find("tr");
var inputRowIndex = 0;
$.each(trs, function (i, obj) {
if ($(obj).find("th").length > 0) { //跳过表头
return true;
}
var rowArray = [];
var thisRowInputs;
if (!inputType) { //所有的input
thisRowInputs = $(obj).find("input:not(:disabled):not(:hidden):not([readonly])");
} else {
thisRowInputs = $(obj).find("input:not(:disabled):not(:hidden):not([readonly])[type=" + inputType + "]");
}
if (thisRowInputs.length == 0)
return true; thisRowInputs.each(function (j) {
$(this).attr("_r_", inputRowIndex).attr("_c_", j);
rowArray.push({ "c": j, "input": this }); $(this).keydown(function (evt) {
var r = $(this).attr("_r_");
var c = $(this).attr("_c_"); if (evt.which < 37 || evt.which > 40) {
return;
} var tRow
if (evt.which == 38) { //上
if (r == 0)
return; r--; //向上一行 tRow = rowInputs[r];
if (c > tRow.length - 1) {
c = tRow.length - 1;
}
} else if (evt.which == 40) { //下
if (r == rowInputs.length - 1) { //已经是最后一行
return;
} r++;
tRow = rowInputs[r];
if (c > tRow.length - 1) {
c = tRow.length - 1;
}
} else if (evt.which == 37) { //左
if (r == 0 && c == 0) { //第一行第一个,则不执行操作
return;
}
if (c == 0) { //某行的第一个,则要跳到上一行的最后一个,此处保证了r大于0
r--;
tRow = rowInputs[r];
c = tRow.length - 1;
} else { //否则只需向左走一个
c--;
}
} else if (evt.which == 39) { //右
tRow = rowInputs[r];
if (r == rowInputs.length - 1 && c == tRow.length - 1) { //最后一个不执行操作
return;
} if (c == tRow.length - 1) { //当前行的最后一个,跳入下一行的第一个
r++;
c = 0;
} else {
c++;
}
} $(rowInputs[r].data[c].input).focus().select();
});
}); rowInputs.push({ "length": thisRowInputs.length, "rowindex": inputRowIndex, "data": rowArray }); inputRowIndex++;
});
}

JS实现表格使用上下左右键聚集的更多相关文章

  1. 在tmux中的vi 上下左右键变为了ABCD等字符

    在本机上用vim编辑时,上下左右键没有问题,但是在tmux中确出现ABCD等字符. 原因是在tmux这个终端,默认做了字符转换,网上搜了很多答案,解决问题的设置是: set term=xterm

  2. java 事件处理机制:按下上下左右键控制小球的运动

    /** * 加深对事件处理机制的理解 * 通过上下左右键来控制一个小球的位置 */package com.test3;import java.awt.*;import javax.swing.*;im ...

  3. ubuntu vi上下左右键无法使用?

    使用vm安装ubuntu出现vi上下左右键无法正常使用. 执行以下两句就可以了 $sudo apt-get remove vim-common    $sudo apt-get install vim

  4. ArcEngine中使用上下左右键移动地图

    转自愿文ArcEngine中使用上下左右键移动地图 因项目需要,需对mapcontrol控件响应上下左右键,从网上找的方法都一样,都值提到了需要设置axMapControl1的KeyIntercept ...

  5. JS中表格的全选和删除要注意的问题

    在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...

  6. datagrid-detailview.js easyui表格嵌套

    datagrid-detailview.js easyui表格嵌套

  7. ubuntu中vim下按上下左右键时输入A、B、C、D的问题

    ubuntu下使用vi 进行编辑文件时,按上下左右键时,会输入A.B.C.D,这个用起来很不方便.网上查得此问题的原因是: ubuntu系统自带的 vi 不完整导致,解决方法:安装完整的vi $ su ...

  8. 案例学习总结:原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  9. JS对表格排序(支持对序号,数字,字母,日期)

    JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...

随机推荐

  1. SpringBoot 定时任务不能同时运行的问题

    使用Spring Task可以非常方便的进行定时任务,但是默认只能有一个定时任务在执行.如何改变这种状况呢? 在定时任务方法上添加@Async注解即可. @Scheduled(cron = " ...

  2. [Python设计模式] 第14章 老板来了——观察者模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目 用程序模拟以下情景,在一个办公室里,当老板进门的时候,前台秘书就偷偷通知办 ...

  3. gdb调试常用实用命令和core dump文件的生成(转)

    1.生成core dump文件的方法: $  ulimit -c //查看是否为0 如果为0 $   ulimit -c unlimited 这样在程序崩溃以后会在当前目录生成一个core.xxxx的 ...

  4. 解决python多版本共存问题

    1.cmd下,python时,默认是python3版本, 2.打开D:\Anaconda2 3.找到exe文件,python.exe和pythonw.exe,将其修改为python2.exe和pyth ...

  5. 基于springboot整合的rabbitmq

    技术:springboot1.5.2 + maven3.0.5 + rabbitmq3.7.13 + jdk1.8   概述 RabbitMQ是对高级消息队列协议(Advanced Message Q ...

  6. manjaro折腾手记

    以前装过Arch,有点折腾,写了个hello world就卸载了.没用过AUR,甚至也没去了解. 听说manjaro继承Arch,几乎开箱即用,对硬件支持非常好,源里面的软件更新非常快.但是没有装中文 ...

  7. 如何保证修改resolv.conf后重启不恢复?

    如何保证修改resolv.conf后重启不恢复? 修改/etc/resolv.conf,重启网卡后,/etc/resolv.conf恢复到原来的状态. CentOS.redhat下面直接修改/etc/ ...

  8. [CI]jenkins安装&插件管理&java-helloworld之旅

    持续集成概述 没有持续集成时的情况 持续集成最佳实战 维护一个单一的代码库 使构建自动化 执行测试是构建的一部分 集成日志及历史记录 使用统一的依赖包管理库 每天至少集成一次 jenkins实现持续集 ...

  9. RTP推流及验证

    [时间:2018-07] [状态:Open] [关键词:rtp,rtcp, ffmpeg,ffplay,sdp,h264,mp2,ts,推流] 近期在学习有关RTP/RTCP的资料,发现看了很多资料, ...

  10. 【神经网络】Dependency Parsing的两种解决方案

    一.Transition-based的依存解析方法 解析过程:首先设计一系列action, 其就是有方向带类型的边,接着从左向右依次解析句子中的每一个词,解析词的同时通过选择某一个action开始增量 ...