table支持键盘上下键

最新推荐文章于 2021-06-03 11:44:13 发布
最新推荐文章于 2021-06-03 11:44:13 发布
阅读量421 收藏
点赞数
分类专栏： JS 文章标签： JavaScript XHTML CSS HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhb739921140/article/details/83664940
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<title>   New   Document   </title>
<style type="text/css">
   body{margin:0px;padding:0px;}
</style>
</head>  
   
<body>  
<table   bgcolor="#ffffff"   width="100%" height=100% id="testtable"   border=1>  
    <tr>  
        <td   height="20" >第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
     <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
     <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
   <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
   <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
   <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
</table>
<script   language="JavaScript">  
<!--  
var isIE = (document.all) ? true : false;
function addEventHandler(oTarget, sEventType, fnHandler) {
   if (oTarget.addEventListener) {
    oTarget.addEventListener(sEventType, fnHandler, false);
   } else if (oTarget.attachEvent) {
    oTarget.attachEvent("on" + sEventType, fnHandler);
   } else {
    oTarget["on" + sEventType] = fnHandler;
   }
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
     if (oTarget.removeEventListener) {
         oTarget.removeEventListener(sEventType, fnHandler, false);
     } else if (oTarget.detachEvent) {
         oTarget.detachEvent("on" + sEventType, fnHandler);
     } else {
         oTarget["on" + sEventType] = null;
     }
};

var tableObj=document.getElementById("testtable");  
var trObj=null;
var selectedRow=1;
function setSelectedRowBg(row,color){row.style.backgroundColor=color;}
addEventHandler(window,"load",function(){setSelectedRowBg(tableObj.rows[selectedRow],"#FFCC66");})
addEventHandler(document,"keydown",objKeydown)
addEventHandler(document,isIE?"mousewheel":"DOMMouseScroll",objWheel)
function objKeydown(e){
      var e=e||window.event;
      switch (e.keyCode) {
     case 38 ://上
      setSelectedRowBg(tableObj.rows[selectedRow],"white")
      selectedRow=selectedRow>0?selectedRow-1:0;
      setSelectedRowBg(tableObj.rows[selectedRow],"#FFCC66");
      fixScroll(tableObj.rows[selectedRow],"t")
      break;
     case 40 ://下
      var rowl=tableObj.rows.length-1;
      setSelectedRowBg(tableObj.rows[selectedRow],"white")
      selectedRow=selectedRow<rowl?selectedRow+1:rowl;
      setSelectedRowBg(tableObj.rows[selectedRow],"#FFCC66");
      fixScroll(tableObj.rows[selectedRow],"b")
      break;
     default :
      return;
    }
    if(isIE){e.returnValue = false;}else{e.preventDefault();}
}
function objWheel(e){
   var e=e||window.event;
   var detail=(e.detail||e.wheelDelta / (-40))/3;
   if(detail<0){
    setSelectedRowBg(tableObj.rows[selectedRow],"white")
    selectedRow=selectedRow>0?selectedRow-1:0;
    setSelectedRowBg(tableObj.rows[selectedRow],"#FFCC66");
    fixScroll(tableObj.rows[selectedRow],"t")
   }else{
    var rowl=tableObj.rows.length-1;
    setSelectedRowBg(tableObj.rows[selectedRow],"white")
    selectedRow=selectedRow<rowl?selectedRow+1:rowl;
    setSelectedRowBg(tableObj.rows[selectedRow],"#FFCC66");
    fixScroll(tableObj.rows[selectedRow],"b")
   }
   if(isIE){e.returnValue = false;}else{e.preventDefault();}
}
function fixScroll(obj,type){
   switch(type){
    case "t":
     var trh=obj.offsetHeight;
     var sch=document.documentElement.scrollTop;
     var offset=sch-getPosition(obj)[1]
     if(offset>0)document.documentElement.scrollTop=sch-trh;
     break;
    case "b":
     var trh=obj.offsetHeight;
     var dv=document.documentElement.clientHeight;
     var offset=getPosition(obj)[1]-dv+trh
     document.documentElement.scrollTop=offset>0?offset:0;
     break;
    default:
     return;
     break;
   }
}
function getPosition(element){
   var t=l=0;
   do {
       t += element.offsetTop || 0;
       l += element.offsetLeft || 0;
       element = element.offsetParent;
     } while (element);
     return [l, t];
}
</script>  
</body>  
</html>   

lhb739921140
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js table行的上下移动，置顶置底，支持ctrl多选
11-23
用js实现 表格行的表格，上移 ，下移，置顶，置底操作 直接引入js 快捷方便 支持ctrl键同时选择多行操作 支持选中行改变样式 支持行号显示 支持未选择行时移动提示
<table>支持键盘上下左右控制
u012424449的博客
05-11 973
<!DOCTYPE html> <html> <head> <title>table支持键盘上下左右控制</title> <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function
方向键盘控制table内的input标签焦点
06-08
添加jquery一个些函数实现使用键盘控制表格内的所有input标签的焦点的切换。
table 列排序&行变色&按上下键光标在行上移动&上下移动行并保存DB
Neil的专栏
09-23 664
function getDate(strDate) { // var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/, // function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')'); strDate =
jQuery 隔行换色 支持键盘上下键，按Enter选定值
12-10
标题中的“jQuery 隔行换色 支持键盘上下键，按Enter选定值”描述了一个功能丰富的交互式表格实现，通过jQuery库实现了隔行变色、键盘导航以及Enter键选择行的功能。以下是这个功能的详细解释： 1. **jQuery隔行换...
js操作table行的上下移动，置顶置底
11-06
在处理这些操作时，我们还需要考虑选中多行的情况，这通常需要结合键盘的Ctrl键进行判断。 支持`ctrl键同时选择多行操作`可以通过维护一个被选中行的数组来实现。当用户按下Ctrl键并点击某行时，我们可以检查该行...
上下左右键控制table中光标(兼容多浏览器)
01-25
本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格（table）中的光标移动，并在光标到达最后一个输入框时新增一行，确保这个功能在多个浏览器中都能正常工作。 首先，我们需要理解...
jQuery 事件 - keydown() 方法的应用
wyq188945的博客
10-15 1371
jQuery 事件 - keydown() 方法的应用 实现一个需求：当按住键盘的上下左右键的时候，自定义一个小球会向你控制的方向移动。 原理：当发生 keydown 事件时运行一个函数，结合上下左右四个键位的ASCII 码实现不同的效果。 效果展示： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ch...
用Jquery给Table 的TD TR绑定事件
lee576的专栏
08-07 1万+
项目需求，我需要在页面加载完之后给新添加的元素增加focus事件， 我用的jQuery1.3，据说多了个live()事件，可以支持这种重复绑定问题，可是去官网一看：Possible event values: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout
关于前端页面的keydown事件
bruobuqi的博客
12-28 2533
html> html> head lang="en"> meta charset="UTF-8"> script src="jquery/jquery-1.8.0.min.js" type="text/javascript">script> title>title> head> body> input id="input" value="default" type="tex
(Keydown,KeyCode)键盘事件的简单使用
猫老爷
04-07 1万+
开发工具与关键技术： VS Keydown,KeyCode 作者:听民谣的老猫 撰写时间：2019/4/1 16:15 W.A.S.D 是我们玩游戏时经常用到的几个键盘按键。通过W来触发游戏人物向上移动，A.S.D分别控制着左下右。也就是为W.A.S.D绑定相应的键盘事件。 ______ 键盘事件 键盘事件的使用就和鼠标事件原理一样。只不过鼠标事件是通过鼠标的点击来触发，而键盘事件是通...
输入框事件监听(一)：keydown、keyup、input
热门推荐
甘焕的博客
08-30 9万+
当输入框的值发生变化时，我们可以通过keydown、keyup、input、onchange、blur事件观察到其值的变化，但它们的应用时机与应用场景存在显著的差异
Vue实现Table内使用keyup移动单元格焦点
weixin_30807779的博客
07-31 949
官网地址：https://cn.vuejs.org/v2/guide/events.html#按键修饰符 一、描述 　　Table内使用键盘方向键操作单元格内input元素 二、基础 　　@keyup.ctrl.37 ctrl + ← 　　@keyup.ctrl.38 ctrl + ↑ 　　@keyup.ctrl.39 ctrl + → 　　@keyup.ct...
HTML表格行上下移动,键盘上下键移动选择table表格行的js代码_javascript技巧
weixin_30758169的博客
06-03 880
//这是要操作的表格：这是第一行 这是第二行 这是第三行这是第四行//这是操作表格的代码var rowNo= -1;var tableId = 'tb';var inputId = 'show';var selectedColor = "#FF0000"function document.onkeydown(){//事件的标识代码if (event.keyCode == 38){for(var k...
jQuery 利用键盘上下键移动表格内容
Cheang_Bokgaai的博客
01-03 1833
在我们编辑表格内容时，经常需要将表格内容的位置进行移动，而利用键盘上下键进行移动是十分方便的。 效果如下： 基本原理是：先使用鼠标选中其中的一行，随后使用键盘上下键，通过获取不同的键值区分上移和下移的操作，随后首先交换两行的编号，随后交换两行的内容，保证了两行内容移动而编号不改变。 下面是代码： function clickA(obj){ curren...
vxe table 键盘事件
最新发布
05-12
VXE Table是一个基于Vue.js和Element-UI的表格组件库。键盘事件是指用户在使用键盘操作时所触发的事件。在VXE Table中，常用的键盘事件有以下几种： 1. keydown：键盘按下事件，当用户按下一个键时触发。 2. keyup：键盘松开事件，当用户释放一个键时触发。 3. enter：回车键事件，当用户按下回车键时触发。 4. tab：Tab键事件，当用户按下Tab键时触发。 在VXE Table中，可以通过绑定键盘事件来对表格进行相关操作。例如，可以监听keydown事件来实现按下某个键时进行一些操作，如新增一行或删除一行。此外，VXE Table还提供了一些默认的快捷键，如Ctrl+C和Ctrl+V用于复制和粘贴表格数据等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值