`
huibin
  • 浏览: 750867 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

table支持键盘上下键

    博客分类：
  • JS
JavaScriptXHTMLCSSHTML 
阅读更多

<!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>   

分享到：
| 转：Oracle存储过程的开发的介绍
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    方向键盘控制table内的input标签焦点

    在传统的网页交互中，用户通常通过鼠标点击来切换输入框的焦点，但通过键盘的上下左右箭头键进行导航能提供更流畅的操作体验，特别是对于数据输入密集型的界面。 HTML的`&lt;input&gt;`标签用于创建可交互的表单元素，如...

    上下左右键控制table中光标(兼容多浏览器)

    本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格（table）中的光标移动，并在光标到达最后一个输入框时新增一行，确保这个功能在多个浏览器中都能正常工作。 首先，我们需要理解...

    js操作table行的上下移动，置顶置底

    在处理这些操作时，我们还需要考虑选中多行的情况，这通常需要结合键盘的Ctrl键进行判断。 支持`ctrl键同时选择多行操作`可以通过维护一个被选中行的数组来实现。当用户按下Ctrl键并点击某行时，我们可以检查该行...

    自己写了一个支持粘贴复制，类似excel的jquery table小插件

    学完之后，没有练习，忘得差不多了，最近一个项目中要使用支持粘贴复制的table，选中表格的一部分区域，通过ctrl+v，可以把excel或者其它地方的数据粘贴到html table中，还能支持键盘上下左右键移动选择区域。...

    jQuery 隔行换色 支持键盘上下键，按Enter选定值

    标题中的“jQuery 隔行换色 支持键盘上下键，按Enter选定值”描述了一个功能丰富的交互式表格实现，通过jQuery库实现了隔行变色、键盘导航以及Enter键选择行的功能。以下是这个功能的详细解释： 1. **jQuery隔行换...

    js table行的上下移动，置顶置底，支持ctrl多选

    本文将详细介绍如何使用JavaScript实现表格行的上下移动、置顶和置底功能，并支持Ctrl多选、选中行样式改变以及行号显示等实用特性。 首先，我们需要创建一个HTML表格元素，包含若干行（tr）和单元格（td）。例如：...

    利用JS来控制键盘的上下左右键(示例代码)

    这份文档主要介绍了如何使用JavaScript（JS）来监听并控制键盘上的上下左右键（箭头键）的操作。文档提供了具体的示例代码，并通过HTML表格的形式展示了如何使键盘的控制与页面上的元素进行交互。在这个过程中，涉及...

    easyui datagrid实现实现上下左右和回车切换单元格

    在实际的应用场景中，为了提高用户的交互体验，我们经常需要让 DataGrid 支持键盘导航功能，即通过键盘上的上下左右键和回车键可以在不同的单元格之间进行切换。这不仅可以提升用户体验，还可以满足不同用户的操作...

    jQuery实现table上移下移和置顶

    此外，你还可以考虑添加键盘快捷键支持，使操作更加便捷。 七、注意事项 - 考虑表单元素的序列化：如果表格包含表单数据，行的移动可能会影响到表单的序列化顺序，需要额外处理。 - 数据持久化：如果数据是从服务器...

    smart-table-select:用于智能表的AngularJS指令允许行选择，包括键盘导航

    `smart-table-select`就是一个针对这种情况而设计的AngularJS指令，它旨在为智能表格提供行选择功能，同时支持键盘导航，提高了用户体验。 `smart-table-select`的核心功能在于它能够与AngularJS的数据绑定机制无缝...

    .net页面实现表格上下左右移动光标

    以上就是一个简单的JavaScript实现，允许用户在.NET页面的HTML表格中通过键盘上下左右移动光标并同时选择文本。这个功能对于数据输入或编辑场景特别有用，用户可以通过键盘高效地导航和操作表格内容。在实际项目中，...

    JS应用(文本框输入出现自动提示框和右键菜单)

    为了提供更好的用户体验，程序还实现了通过键盘上下键来选择列表中的建议项。当用户按下方向键时，会在列表中高亮显示相应的项，用户可以通过这种方式快速定位并选择自己想要的内容。 ```javascript if (window....

    js穿梭框,简单直接上手即用，js和css可随意修改

    - 键盘导航：使用上下箭头键在列表中导航，Enter键添加/移除条目。 - 残障辅助（Accessibility）：确保键盘可访问，并为屏幕阅读器提供合适的标签和属性。 5. **响应式设计**：如果需要在不同设备上使用，还需...

    jQuery一步一步实现跨浏览器的可编辑表格，支持IEFi

    接下来，我们可能需要处理键盘事件，例如回车键提交更改，或者上下左右箭头键在单元格间导航。这可以通过监听`keydown`事件实现： ```javascript $("#editableTable td").on('keydown', function(event) { if ...

    上移下移及表格复选框获取

    例如，表格应有合理的头部和标识，复选框应有清晰的标签，且支持键盘导航。 综上所述，"上移下移及表格复选框获取"这个功能涵盖了Web开发中的表格布局、用户交互、事件处理、数据操作等多个核心知识点，需要开发者...

    react-spreadsheet-grid：类似于Excel的网格组件，用于带有自定义单元格编辑器，高性能滚动和可调整大小的列的React

    :check_mark_button: 性能滚动所需的行数 :check_mark_button: 可调整大小的列 :check_mark_button: 通过鼠标和键盘控制 :check_mark_button: 灵活设置残疾细胞 :check_mark_button: 延迟加载支持 :check_mark_...

    usb hid usage报告描述符生成工具

    在上下文中，它可能包含了一个使用C++或其他编程语言实现的USB HID报告描述符生成工具，或者是一些示例代码和教程，帮助开发者理解和创建自己的HID设备驱动。 使用USB HID Usage报告描述符生成工具时，开发者需要...

    windows hook实现

    2. **钩子类型**：Windows支持多种钩子类型，如键盘钩子（WH_KEYBOARD）、鼠标钩子（WH_MOUSE）、消息钩子（WH_GETMESSAGE）、定时器钩子（WH_TIMER）等。每种钩子都有其特定的用途，比如WH_KEYBOARD用于捕获键盘...

    数字微调input兼容IE6

    数字微调input允许用户通过加减按钮或键盘上下箭头来增加或减少输入框内的数值，它在现代浏览器中已经非常常见，但在IE6这样的老版本浏览器中可能存在兼容性问题。 首先，我们需要理解IE6的特性和限制。IE6不支持很...

Magicbox
Global site tag (gtag.js) - Google Analytics