Jquery实现点击表格行变色!
时隔一年左右,学习了新的知识,从尝试Linux部署项目,网络安全,至后端开发,然后用起了Jquery,
而且是必须要做。也让自己见识可能会更广泛一些。对于一个刚毕业的大学生而言。方正我是没有用过jquery,
尽管我有培训学习过,也只是两天时间,略有了解而已,工作中画画页面肯定后期通过专业人士调,可怕,
感觉我即将这是我迈向前端的开始,不过还是很开心,调页面的时候,一定要稳,而且需要时间。
我调这个js倒是没有费多大劲,可是也是参考网上的,对于命令更是一知半解。后台干脆撇弃网上五花八门的
例子,按照自己的思路来写。也就是两句代码的事,可能我写的不太完美,但是分享出来算是对我的一个成长过程
的记录。ok,废话不多说。开始,首先我先介绍一下我的环境。
1.前台页面没什么的,如下,中间可能一堆td,当然也可能没有<tbody>,然后,记得每行<tr>都要加个事件,假如你是写再<c:forEach>里面的,就
更好了,只需要添加在那一个<tr>标签里面就ok了
<tbody><tr onclick=“SingleChangeColor(this)”>
<td></td>.......
</tr><tbody>
2.然后就是js的这个方法的书写了,你可以写在页面的
<script type="text/javascript">
</script>里面,也可以卸载js里。
3.然后方法就是:
function SingleChangeColor(e){
//1.清楚表格的背景颜色:注意#contentTable是你表格的ID,ID唯一
$("#contentTable").find("td").css("background","");
//2.改变当前点击行的背景颜色
$(e).find("td").css("background","red");//red为颜色,你也可以输入颜色值#00000等等
}
4.根据情况来o
Jquery实现点击表格行变色!的更多相关文章
- 通过jQuery实时监听表格行数变化
[本文出自天外归云的博客园] 使用bootstrap table组件,当使用过滤器的时候,页面的表格行数发生变化,此时需要统计表格行数.想要监听表格变化,如何做呢? 使用场景:有一个表格里放着许多测试 ...
- jquery实现表格中点击相应行变色功能
对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en ...
- js 指向表格行变色,离开恢复
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- DOM操作--表格点击行变色
点击表格行变色,这种网页效果应该还是比较常见的.大家应该看见了,我这里的效果是用DOM操作实现的,那么很多人会问什么是DOM操作,贴出代码之前我就和大家解释一下什么是DOM操作: DOM是Docume ...
- jquery更改表格行顺序实例
使用jquery写的更改表格行顺序的小功能 表格部分: 复制代码代码如下: <table class="table" id="test_table"> ...
- jQuery实现表格隔行换色且感应鼠标高亮行变色
jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...
- jQuery插件实现表格隔行换色且感应鼠标高亮行变色
实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页(二)前端修改、添加表格行点击弹出模态框
在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...
随机推荐
- shell生成随机字符串
#!/bin/bash i=1while [ $i -le 10000 ]doa=`echo `< /dev/urandom tr -dc A-Za-z0-9 | head -c6``echo ...
- Freescale MKL16Z1288VF4 芯片调试接口
WDOG监视内部系统操作,并在发生故障时强制复位.它可以运行在一个独立的1 kHz低功率振荡器,具有可编程刷新窗口,以检测程序流或系统频率的偏差. 看门狗计时器保持一个时间在系统上运行,并重置它,以防 ...
- 开始转变方向,学习Linux——《Linux就该这么学》
三十而立,四十不惑. 我呢,未立将不惑. 苦恼之余,决定拓展就业范围,正式学习Linux,准备考取RHCE证书. 考证需要报名培训机构,这是一个明智的选择,毕竟中国人善于考试,善于钻研考试. 联系培训 ...
- 【转载】 Java中String类型的两种创建方式
本文转载自 https://www.cnblogs.com/fguozhu/articles/2661055.html Java中String是一个特殊的包装类数据有两种创建形式: String s ...
- [蓝桥杯]PREV-22.历届试题_国王的烦恼
问题描述 C国由n个小岛组成,为了方便小岛之间联络,C国在小岛间建立了m座大桥,每座大桥连接两座小岛.两个小岛间可能存在多座桥连接.然而,由于海水冲刷,有一些大桥面临着不能使用的危险. 如果两个小岛间 ...
- [蓝桥杯]PREV-15.历届试题_格子刷油漆
题目描述: 代码如下: #include <stdio.h> #include <stdlib.h> #include <string.h> #define MOD ...
- git中加入中文时,乱码
原因:编码问题,可以看到txt转为为ANSI编码 ---->将编码方式改为UTF-8即可
- Python【每日一问】12
问:请解释线程.进程.协程 答: [定义] 进程 进程:一个运行的程序(代码)就是一个进程,进程是系统资源分配的最小单位.进程拥有自己独立的内存空间,多个进程间资源不共享 线程 线程:调度执行的最小单 ...
- [UE4]AttachToComponent的AttachmentRule
官方文档 KeepRelative 将当前相对转换保持为新父级的相对转换 KeepWorld 自动计算相对变换,使附着的组件保持相同的世界变换 SnapToTarget 捕捉转换到附着点
- 02-cookie简单使用
@Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletExcep ...