`

JS 动态设置选中行的CSS

阅读更多

// 动态改变选中行的CSS
  function setSelectedTrCss(){
   var lenTr = document.getElementById('subMenuTableId').rows.length;  // 行数
             for(var i=1; i < lenTr; i++){
               var radioId = 'ids' + i;
               if(document.getElementById(radioId).checked){ // 选中设置CSS为tablebody2
                   document.getElementById('tdId'+i).className="tablebody2";
                   document.getElementById('tdName'+i).className="tablebody2";
                   document.getElementById('tdNo'+i).className="tablebody2";
               }
               else{
                   document.getElementById('tdId'+i).className="tablebody1"; // 未选中设置CSS为tablebody1
                   document.getElementById('tdName'+i).className="tablebody1";
                   document.getElementById('tdNo'+i).className="tablebody1";
               }
             }
  }

 

用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup。

如果想实现长按方向键循环选中单选钮的话,需要利用onkeydown

分享到:
评论

相关推荐

    CSS设置选中网页文字时的背景和颜色

    这些属性通常需要通过JavaScript或其它CSS属性来实现。 由于技术原因,可能会有部分文字识别错误或漏识别,但是通过上述的描述,我们可以总结出几个关键点: - 利用CSS的::selection伪类可以定制用户选中网页文字...

    js漂亮图片选中效果

    在网页设计中,为了提升用户体验和视觉吸引力,经常会使用JavaScript来实现各种动态效果,其中“js漂亮图片选中效果”就是一个常见的应用场景。这种效果通常用于图片轮播、产品展示或者广告设计,它允许用户交互式地...

    HTML5+CSS3图片选中列表选中

    在这个“HTML5+CSS3图片选中列表”项目中,结合JavaScript库jQuery,我们可以实现一个高效且用户体验良好的图片选中系统。以下是关于这个项目的一些关键知识点: 1. HTML5新特性: - `data-*`属性:用于在HTML元素...

    css实现图片选中效果.rar

    此外,如果需要实现一个可交互的图片相册,我们还可以结合JavaScript(JS)和CSS,使得用户点击图片后,图片保持选中状态。这通常会涉及到添加或移除CSS类名。例如,我们可以为每个图片元素定义一个`selected`类,...

    js 设置选中行的样式的实现代码

    本文主要介绍了在JavaScript中实现设置表格中选中行样式的函数实现方法,详细阐述了如何通过编写一个自定义函数来为表格中的选中行添加特定的样式,并且同时为未选中的行设置另外一种样式。 知识点一:函数实现 ...

    html+css+js表格动态增删改与xml加载与保存

    总的来说,"html+css+js表格动态增删改与xml加载与保存"这个项目涵盖了网页开发中的基本技能,包括动态HTML操作、CSS美化、JavaScript事件处理和XML数据交互。掌握这些技术,能够帮助开发者构建具有强大功能和良好...

    JavaScript & CSS 实现div选中

    在网页开发中,JavaScript 和 CSS 是两种至关重要的技术,它们分别负责动态交互和样式设计。当我们需要实现一个div(一种常见的HTML元素,用于定义独立的布局区域)的选中效果时,JavaScript通常用来处理用户的交互...

    js万能排序、js选中所属的行

    在这个例子中,`selectedRow`是你要选中的行的ID,`selected`是CSS类名,用于显示选中状态。 现在,我们引入Struts框架的国际化特性。Struts是一个基于MVC设计模式的Java Web应用框架,它允许开发者将业务逻辑、...

    jQuery Table选中表格行变色代码.zip

    在这个例子中,我们假设有一个名为`.highlight`的CSS类,它定义了被选中行的颜色: ```css .highlight { background-color: yellow; /* 可以根据需要自定义颜色 */ } ``` 在提供的资源中,`说明.htm`可能包含了这...

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

    在JavaScript中,我们可以为选中的行添加一个特定的CSS类,如`selected`,然后在CSS中定义这个类的样式,如背景色、边框等,以突出显示选中的行。 `支持行号显示`可以在表格的第一列创建一个额外的单元格,用于显示...

    设置表格隔行显示和选中行样式的插件

    例如,可以使用`nth-child`选择器来针对奇数行和偶数行设置不同的背景颜色: ```css tr:nth-child(even) { background-color: #f2f2f2; } tr:nth-child(odd) { background-color: #ffffff; } ``` 但这里提到的是...

    全动态选项卡 css js

    这个压缩包文件的主题是关于如何使用CSS和JavaScript来创建这种全动态选项卡。 在CSS(层叠样式表)中,我们主要关注以下几个方面: 1. **样式设置**:首先,我们需要为选项卡的容器、每个选项卡按钮以及显示内容...

    js实现鼠标点击文本框自动选中内容的方法

    标题中提及的"js实现鼠标点击文本框自动选中内容的方法"主要涉及到的是JavaScript编程语言中的两个概念:鼠标点击事件(onClick)和文本选择事件(select)。在Web开发中,页面上的文本框(input type="text")或者...

    点击table任意列选中当前行demo

    综上所述,"点击table任意列选中当前行demo"的实现涵盖了HTML结构、CSS样式、JavaScript交互以及可能的后端交互等多个方面,是Web开发中的一个综合实例。理解并掌握这些知识点对于提升Web应用的用户体验和交互设计...

    Javascript(Ctrl+鼠标)选中行

    以上就是实现"Javascript(Ctrl+鼠标)选中行"功能的关键步骤和涉及的JavaScript知识点,包括事件监听、DOM操作、用户交互以及CSS样式。这个功能通过结合键盘和鼠标输入,极大地提高了用户在网页应用中的交互效率。

    jQuery table选中表格行变色

    在CSS中定义`selected`类,以设置选中行的背景颜色和其他样式: ```css #myTable tbody tr.selected { background-color: #FFFFCC; /* 变色后的颜色,可自定义 */ } ``` 这样,当你点击表格中的任意一行时,该行...

    jQuery Table点击选中表格行变色代码.zip

    总的来说,这个"jQuery Table点击选中表格行变色代码"是一个基础的用户交互示例,展示了如何结合jQuery的事件处理和CSS样式来增强用户体验。在实际项目中,开发者需要根据具体需求进行扩展和优化,例如增加数据驱动...

    layui的表格table选中数据后更改本行的颜色

    总的来说,实现layui表格选中行变色的功能,主要涉及JavaScript事件监听、DOM操作以及CSS样式设置。在前后端分离的项目中,前端通过调用后端API获取数据并渲染到表格。理解并熟练运用这些技术,能帮助你更好地利用...

    个人博客html+css+JavaScript完整代码

    1. **导航菜单交互**:通过JavaScript,我们可以实现导航菜单的展开和折叠,以及高亮当前选中的页面。 2. **滚动效果**:比如滚动到顶部按钮、页面滚动时固定头部等。 3. **表单验证**:可以验证用户输入,如邮箱...

Global site tag (gtag.js) - Google Analytics