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

最新推荐文章于 2020-03-10 14:59:01 发布
最新推荐文章于 2020-03-10 14:59:01 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： JavaScript 文章标签： jquery function datagrid border xhtml input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KimSoft/article/details/4400242
版权

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
<!--
/* css for data grid*/
.datagrid {
 width: 100%;
 background-color: #6595d6;
}
.datagrid caption {
}
.datagrid th {
 /*background-image: url("images/div.th.background-image.gif" );*/
 background-color: #6595d6;
 color: #ffffff;
 font-size: 12px;
 font-weight: bold;
 height: 25px;
 line-height: 25px;
 text-align: center;
}
.datagrid tr {
}
.datagrid td {
 padding: 5px;
 background-color: #ffffff;
}
/* css for OEC form page*/
.row_focus {
 background: #B0FFB0;
 border: 1px solid #00cc33;
}
/* css or table row effect */
tr.alt td {
 background: #ecf6fc;
}
tr.over td {
 background: #bcd4ec;
}
-->
</style>
<title>无标题文档</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <label>
    <input type="text" name="txt_no" id="txt_no" />
  </label>
  <br />
  <table width="600" border="0" cellpadding="3" cellspacing="1" class="datagrid">
    <tr>
      <td>1</td>
      <td> 张三</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>4</td>
      <td>马六</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>5</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>6</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>7</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>8</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>9</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>10</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <input type="hidden" name="prevTrIndex" id="prevTrIndex" value="-1" />
</form>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://js-hotkeys.googlecode.com/files/jquery.hotkeys-0.7.9.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#prevTrIndex").val("-1");//默认-1
 var trSize = $(".datagrid tr").size();//datagrid中tr的数量

 function clickTr(currTrIndex){
  var prevTrIndex = $("#prevTrIndex").val();
  if (currTrIndex > -1){
   $("#tr_" + currTrIndex).addClass("over");
  }
  $("#tr_" + prevTrIndex).removeClass("over");
  $("#prevTrIndex").val(currTrIndex);
 }

 $(".datagrid tr").mouseover(function(){//鼠标滑过
  $(this).addClass("over");
 }).mouseout(function(){ //鼠标滑出
  $(this).removeClass("over"); 
 }).each(function(i){ //初始化 id 和 index 属性
  $(this).attr("id", "tr_" + i).attr("index", i);
 }).click(function(){ //鼠标单击
  clickTr($(this).attr("index"));
 }).dblclick(function(){ //鼠标双击
  $("#txt_no").val(($(this).find("td")[0]).innerHTML);
 });

 $(".datagrid tr:even").addClass("alt"); //偶行变色
 
 $(document).bind('keydown', 'up', function(evt){ //↑
  var prevTrIndex = parseInt($("#prevTrIndex").val());
  if (prevTrIndex == -1 || prevTrIndex == 0){
   clickTr(trSize - 1);
  } else if(prevTrIndex > 0){
   clickTr(prevTrIndex - 1);
  }
  return false;
 }).bind('keydown', 'down', function(evt){ //↓
  var prevTrIndex = parseInt($("#prevTrIndex").val());
  if (prevTrIndex == -1 || prevTrIndex == (trSize - 1)){
   clickTr(0);
  } else if (prevTrIndex < (trSize - 1)) {
   clickTr(prevTrIndex + 1);
  }
  return false;
 }).bind('keydown', 'return', function(evt){ //↙
  var prevTrIndex = parseInt($("#prevTrIndex").val());
  $("#txt_no").val(($("#tr_" + prevTrIndex).find("td")[0]).innerHTML);
  return false;
 });
 clickTr(0);
})
</script>
</body>
</html>

KimSoft
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js 实现 用键盘上下键实现表格行的上下选择
03-31
js 实现 用键盘上下键实现表格行的上下选择! 值得下载看看!资源免费,大家分享!!
JQuery操作表格（附源码）实现tr上下移动。
03-21
基于JQuery的操作表格附源码，实现html中table的tr的添加、删除以及上下移动。
jQuery仿google搜索下拉列表 支持键盘上下键 支持鼠标移动
飞鸟的博客
11-12 2418
div>    input type="text" name="s" id="word" value="" url="ajax.aspx?id=sousuo" autocomplete="off">         input type="submit" value="搜索">         div id="suggestions">     div>  
表单隔行变色
qq_45401346的博客
03-10 396
效果图 css代码` <style> * { margin: 0px; padding: 0px; } .wrap { width: 500px; margin: 100px auto 0; } ...
jquery控制table中的tr上下移动排序
Garson小站
02-29 198
原文地址：http://blog.csdn.net/aa644509120/article/details/6423667 个性化简历 简历输出配置 ...
jQuery 隔行换色 支持键盘上下键，按Enter选定值
10-29
在这个特定的场景中，我们看到的是一个使用jQuery实现的功能，即“隔行换色”以及“支持键盘上下键和Enter选定值”。 隔行换色是一种常见的表格美化技术，通过改变奇偶行的背景色，使得表格内容更易读，提高用户...
jquery隔行换色效果实现方法
12-09
本文实例讲述了jquery隔行换色效果实现方法。分享给大家供大家参考。具体分析如下： 使用 jquery 来实现隔行换行的效果，简单得就跟吃饭一样。来吧，看看代码到底有多么的简单 代码如下:<html> <head> ...
jquery实现表格隔行换色效果
10-23
下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能，感兴趣的朋友可以参考下
JS JQuery 模拟百度搜索上下键选取
热门推荐
研究、探索、分享与成长
08-03 3万+
先看效果图       上面就是该功能的最终效果，最上面的那女人是赠送的。 下面来看代码：   首先是HTML代码，这里我选择的是li，当然你可以可以用其他的比如说table或div
用键盘实现上下选择
weixin_30794499的博客
12-17 345
<html> <head> <title>键盘方向键控制表格</title> </head> <body onKeyDown="keyCheck();"> <table width="80" bgcolor="#FFFFFF...
zTree封装辅助JS（弹出层，弹出层筛选，上下键选择）
01-22
主要是传统下拉框的优化选择，分单选和多选两种类型，可以是弹出层形式，也可以是平铺的形式展现。 集成搜索，多选，区段识别功能，内置设置和获取选中的API。 搜索主要是用于单选时内容较多的情况。 多选支持全选和反选。 区段识别是输入多个值，选中多个项（以ztree中的id作为识别条件，全匹配识别） 以ztree为核心，依赖jquery，easyUI（弹出层选择所用）
JavaScript键盘上下键的操作(选择)
weixin_34194359的博客
10-27 563
两段使用键盘的上下键进行选择的代码：第一段 程序代码&lt;Script Language="JScript"&gt;      function document.onkeydown(){         var rowsArray = document.all('oTable').rows;         for(var i=0;i&lt;rowsArray.length;i++){    ...
jquery应用技巧-使用attr给指定tr下的所有td赋属性
weixin_34352449的博客
04-14 1606
2019独角兽企业重金招聘Python工程师标准>>> ...
改变elementui的table的选中行高亮显示
江黎
11-19 2万+
:row-class-name="tableRowClassName"在渲染表格的时候就调用了，不能用来响应点击事件改变行的颜色。 可以给表格添加:highlight-current-row属性，高亮显示当前行。然后通过修改css来改变颜色，像这样 .el-table__body tr.current-row&gt;td { background: #f57878 !impo...
Jquery 表格光标上下左右移动 键盘操作
iteye_20286的博客
11-10 716
&lt;script type="text/javascript"&gt;         var tabTableInput = function (tableId, inputType) {             var rowInputs = [];             var trs = $("#" + tableId).find("tr");             var...
jquery 按键盘上的enter事件
lijunling2008live的专栏
01-18 7523
系统默认情况下，使用Tab按键切换页面元素的焦点，有没有想过回车键Enter也可以实现这种功能，并且具有良好的用户体验。接下来我们使用Jquery实现回车键Enter切换焦点，此代码在常用浏览器IE7， IE8， Firefox 3， Chrome 2 和 Safari 4测试通过。 使用的开发工具是微软VS2010+Jquery框架 实现步骤如下 1、首先引用Jquery类库
JavaScript利用键盘方向键（上下键）控制表格行选中
weixin_30439031的博客
10-31 1407
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .buddyListOdd{ background-colo...
jquery按下enter键键盘事件
最新发布
06-07
可以使用以下代码监听用户在输入框中按下 Enter 键： ```javascript $('input').keypress(function(event) { if (event.which === 13) { // 在这里执行你的代码 } }); ``` 其中 `event.which === 13` 判断用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值