JS实现页面table鼠标移动改变tr行颜色,单击tr选中复选框功能

时间:2022-09-22 13:53:50

JS源代码:

 //需要设置tr背景颜色
var highlightcolor='#bfecfc'; //设置背景颜色
function changeto(index){
var tr1 = document.getElementById("tr" + index);
if(tr1.style.backgroundColor != highlightcolor ){
tr1.style.backgroundColor = highlightcolor;
}
} //还原原背景色
function changeback(index){
var tr1 = document.getElementById("tr" + index);
var chk = document.getElementById("chid" + index);
if(chk == null || !chk.checked){
tr1.style.backgroundColor = "";
}
} //表格行单击事件
function clickRow(index){
if(flag){
var tr1 = document.getElementById("tr" + index);
var chk = document.getElementById("chid" + index);
if(chk == null){
return;
}else{
if(chk.checked){
chk.checked = false;
tr1.style.backgroundColor = "";
}else{
chk.checked = true;
tr1.style.backgroundColor = highlightcolor;
}
}
}
} //标题栏全选复选框
function checkAll(status, idsName){
var checkbox=document.getElementsByName(idsName);
for (var i=0;i<checkbox.length;i++){
checkbox[i].checked=status;
if(checkbox[i].checked){
changeto(i+1);
}else{
changeback(i+1);
}
}
}

JSP页面table标题行复选框设置:

1 <td><input type="checkbox" onclick="checkAll(this.checked, 'listForm.ids');" title="全选/取消"/></td>

参数一:this.checked,当前复选框的状态

参数二:listForm.ids,数据行中复选框的name值,即:

 <td><input type="checkbox" name="listForm.ids"id="chid${i.count}" onclick="clickrow('${i.count}')" /></td>

数据行tr的设置:

 <tr onclick="clickrow('${i.count}')" onmouseover="changeto('${i.count}')" onmouseout="changeback('${i.count}')" id="tr${i.count}">

JS实现页面table鼠标移动改变tr行颜色,单击tr选中复选框功能的更多相关文章

  1. js如何实现动态点击改变单元格颜色?

    js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...

  2. layui table 根据条件改变更换表格颜色 高亮显示 数据筛选

    请问想让当layui表格的某个字段符合某个条件的时候,让该行变颜色.这样可以实现么. layui数据表格怎么更换表格颜色 layui表格 通过判断某一行中的某一列的值进行设置这一行的颜色 LayUI之 ...

  3. Bootstrap table插件 被选中的行颜色改变

    参考:https://www.jianshu.com/p/1bb4c37ef636 在 bootstrap-table.min.css 中修改源码 //选中行颜色 .fixed-table-conta ...

  4. easyui的datagrid改变整行颜色

    easyui的datagrid改变单元格颜色方法1:https://www.cnblogs.com/raitorei/p/10395233.html easyui的datagrid改变单元格颜色方法2 ...

  5. java 24 - 5 GUI之 鼠标移动改变窗体背景颜色

    需求: 创建一个可改变背景颜色的窗口,鼠标移动到按钮上,窗口背景就会改变成特定的颜色 步骤: (大致上) 创建窗口对象 创建按钮对象 添加按钮到窗口中 设置窗口关闭监听事件 设置鼠标进入按钮区域的监听 ...

  6. EXCEL这样根据某单元格的内容来改变整行颜色

    1.选择你需要改变颜色的单元格列数,然后打开“格式”--“条件格式”: 2.选择“公式”一项,在后面输入=$L1=2050,然后点开下面的“格式”按钮设置好格式. 3.基本上就OK了,注意在输入公式的 ...

  7. js改变&comma;设置table单双行颜色&comma;jquery改变&comma;设置table单双行颜色

    1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...

  8. js禁用页面上右键菜单、选中和复制

    有时候我们不想页面上的内容被人复制走,那么就可以使用js对页面进行设置,禁止右键菜单.禁止选中.禁止复制等功能可以有效的达到这个效果,js代码如下所示: /** * 禁用右键菜单 */ documen ...

  9. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

随机推荐

  1. iOS开发——UI基础-自定义构造方法,layoutSubviews,Xib文件,利用Xib自定义View

    一.自定义构造方法 有时候需要快速创建对象,可以自定义构造方法 + (instancetype)shopView { return [[self alloc] init]; } - (instance ...

  2. 【HDU4419 Colourful Rectangle】 线段树面积并

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4419 题目大意:给你n个矩形,每个矩形都有一种颜色,矩形覆盖会出现另外一种颜色,问你所有矩形中不同的颜 ...

  3. Android--Retrofit&plus;RxJava的简单封装(三)

    1,继续接着上一篇的讲讲,话说如果像上一篇这样的话,那么我们每一次请求一个结构都要创建一堆的Retrofit对象,而且代码都是相同的,我们可以试试封装一下 先创建一个HttpMethods类,将Ret ...

  4. &lbrack;转&rsqb;网络诊断工具:MTR

    MTR是Linux平台上一款非常好用的网络诊断工具,集成了traceroute.ping.nslookup的功能,用于诊断网络状态非常有用.能按要求对路由中所有节点进行批量测试 第一列(Host):I ...

  5. 日志基本概念/rSyslog

    日志是纯文本的,在var/log/ linux系统下的日志类型: 内核信息   服务信息    应用程序信息

  6. Objective-C--- 多态 、 协议

    1 编写交通工具程序 1.1 问题 本案例需要创建一个TRTransportation类,类中有一个方法叫print的方法,该方法默认输出 “显示交通工具信息”,这个类作为父类,派生出三个子类TRTa ...

  7. jQuery插件css3动画模拟confirm弹窗

    相比浏览器自带的alert.confirm,能力所及,我更喜欢所有的东西都是自定义:首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js.<link rel="sty ...

  8. 贱贱的美团安卓客户端---如何实现让安卓app在应用列表获得较靠前的位置

    起因: 自打愚安我开始使用android设备以来,一直觉得google还算厚道,应用列表里的顺序一直都是依据APP的名称,按照先中文(拼音字母表顺序),后英文(字母表顺序)的原则进行排序的,并没有说G ...

  9. ECMA5&period;1中关于encodeURI&comma;decodeURI 和encodeComponentURI&comma;decodeComponentURI的区别

    The encodeURI and decodeURI functions are intended to work with complete URIs; theyassume that any r ...

  10. 用APK Downloader直接从Google Play上下载apk

    APK Downloader可以直接从Google Play上下载apk,相比较其他软件,这个不需要提供Google ID,对于没有刷机的同学还是有些帮助的.