js 上下键控制table里tr的背景上下移动选中效果

最新推荐文章于 2021-02-04 20:09:57 发布
最新推荐文章于 2021-02-04 20:09:57 发布
阅读量912 收藏
点赞数 1
文章标签： css html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjtlk78475555/article/details/70314115
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head> 
  <title>New Document</title> 
  <meta charset="utf-8" /> 


 </head> 
 <body> 
  <style>
tr.highlight {
 background:#08246B;
 color:white;
}
</style>
<table border="1" width="70%" id="ice">
 <tr onClick="selectTR();return false;" class="highlight">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
 <tr onClick="selectTR();">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
 <tr onClick="selectTR();">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
 <tr onClick="selectTR();">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
 <tr onClick="selectTR();">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
 <tr onClick="selectTR();">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
 <tr onClick="selectTR();">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
 <tr onClick="selectTR();">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
 <tr onClick="selectTR();">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
</table>
<script language="javascript"> 
<!-- 
var currentLine = 0; 


document.onkeydown = function(e)  
{ 
  e = window.event || e; 
  switch(e.keyCode)  
  { 
    case 38: 
      currentLine--; 
      changeItem(); 
      break; 
    case 40: 
      currentLine++; 
      changeItem(); 
      break; 
    default: 
      break; 
  } 
} 
function selectTR()


{
 currentLine=window.event.srcElement.parentElement.rowIndex;
 changeItem();
}
//改变选择项目 
function changeItem() 
{ 
  if(document.all) 
    var it = document.getElementById("ice").children[2]; 
  else
    var it = document.getElementById("ice");
 
  for(i=0;i<it.rows.length;i++)  
  { 
    it.rows[i].className = ""; 
  } 
 <!-- alert(currentLine)-->
  if(currentLine < 0) {
   <!-- currentLine = it.rows.length - 1; -->
currentLine =0;
}
  if(currentLine == it.rows.length) {
    currentLine = it.rows.length - 1; 
}
  it.rows[currentLine].className = "highlight"; 
  
} 
//--> 
</script> 
 </body>
</html>
会飞的刘博士
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS按钮控制内容上下滚动
波克比的前端CSDN博客
12-05 2110
CSS代码： *{ padding: 0; margin: 0;} li{ list-style: none;} a{ text-decoration: none; color: #333;} a:hover{ color: #f00;} .center{ text-align: center; margin-top: 20px; font-family: "Microsoft Yahe
键盘上下键移动选择table表格行的js代码
10-29
通过键盘上的上下键可以选择表格行的实现效果代码。思路不错，需要的朋友可以参考下。
jQuery实现表格点击行(tr)选中复选框
weixin_34309435的博客
02-18 484
为什么80%的码农都做不了架构师？>>> ...
selected 如何给tr选中_JS 动态设置选中行的CSS
weixin_33907300的博客
02-04 239
// 动态改变选中行的CSSfunction setSelectedTrCss(){var lenTr = document.getElementById('subMenuTableId').rows.length; // 行数for(var i=1; i < lenTr; i++){var radioId = 'ids' + i;if(document.getElementById(ra...
实现table中tr、td的可移动效果
CNYYGJ
07-11 3716
先上代码： 分类
jQuery实现table中的tr上下移动并保持序号不变的实例代码
10-21
`updateNums`函数负责更新所有tr的序号，确保在tr移动后，序号仍然正确。 通过这样的实现，用户可以通过点击上下箭头按钮轻松地调整表格中的行顺序，而无需刷新页面，且序号会随着行的移动自动调整，提供了良好的...
js操作table行的上下移动，置顶置底
11-06
首先，`js操作table行的上下移动，置顶置底`这个主题涉及到的主要技术是DOM操作，事件监听和数组处理。DOM（Document Object Model）是HTML和XML文档的编程接口，通过JavaScript我们可以对表格中的每一行进行操作。...
jQuery实现的调整表格行tr上下顺序
10-22
在网页开发中，表格（Table）是一种常见的数据展示方式，有时候根据需求，我们需要对表格内的行（tr）进行上下移动，以改变数据的显示顺序。本文将详细介绍如何使用JavaScript库jQuery来实现这一功能。 首先，...
js实现点击table表头字段带箭头标示
08-26
绝对是好东西，非常简单实用，表头有箭头表明是降序还是升序一目了然，非常实用
Html table 页 实现点击选中tr行 改变背景颜色
WX_Scorpion的博客
10-14 1万+
Html table 页 实现点击选中tr行 改变背景颜色 table 表格展示数据时没有选中的效果，如果对展示数据 做了一些操作 会导致 不太容易分辨，所以选中效果就很重要，而这个事件需要作用于整个tr的所有td 而不是某个td。 具体请看代码，如果可以更加方便请指出，。 首先我们要把click确定在哪个tr上 ，关键获取tr是最重要的，可以根据不通的选择器实现 我使用的是id选择器 加上 标签...
js操作table中tr的顺序实现上移下移一行的效果
10-17
主要介绍了js操作table中tr的顺序实现上移下移一行的效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
JQuery操作表格（附源码）实现tr上下移动。
03-21
基于JQuery的操作表格附源码，实现html中table的tr的添加、删除以及上下移动。
[HTML]table选中行效果
我是涛锅
05-04 1万+
比如是这样一个结构的table<table id="tUsers"> <thead> <tr> <td>序号</td> <td>帐号</td> <td>密码</td> </tr> </thead> <tbody> <tr> <td>1
如何实现table中，点击某行，选中某行，改变其背景色
热门推荐
u012431404的博客
08-19 2万+
1、首先，现在你的文件中导入 jquery.js 文件 2、在中添加如下代码 $("#table1 tr").click(function(){        document.getElementById("oddNum").value = this.id; //每行设置不同的id值，该行是获取当前行的唯一值         $(this).addClass("backcolor")
tr 上下移动
JackieLiuLixi的专栏
05-16 974
pageEncoding="GBK"%> $(function(){ }); function check(){ if(jQuery.trim(jQuery("#commOptName").val())==""){ Dialog.alertFocus("选项名称不能为空！", 'themeName'); return false; } /
JS实现表格使用上下左右键聚集
weixin_30314793的博客
10-06 160
//调用：new tabTableInput("tblGrid","text"); var tabTableInput = function (tableId, inputType) { var rowInputs = []; var trs = $("#" + tableId).find("tr"); var inputRowIndex = 0; $.ea...
table行tr选中上下移动JS-浏览器兼容
码生剑气-方方圆圆
04-12 1057
移动前：移动后：&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head &gt; &lt;title&gt;无标题页&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table id="tb1&
鼠标拖拽表格table的tr上下移动
sdiudui的博客
04-12 4770
小伙伴们肯定在某个项目里遇到要拖拽table表格的tr或者td那么下面就来讲一下，话不多说直接上代码1，引用插件&lt;script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;这两个是主要插件百度自行下载去吧，要放在jquery.min.js下面哦&lt;link rel="styleshee...
点击按钮多个tr里面td相互移动
最新发布
06-08
在事件处理程序中，您需要获取当前选中的td元素，并检查它是否可以移动到目标位置。如果可以移动，您需要获取目标位置上的td元素，并将当前选中的td元素插入到目标位置。以下是一个简单的示例代码： ```html <table...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值