之前在做一个当前选中行样式变化时发现网上很多方法都是利用在行内添加checked,然后通过checked是否选中来判断当前选中行的位置,今天就整理了一个不需要在行内添加其他按钮直接通过变化当前选中行的背景颜色来区分是否选中。这个Demo里面总共包含三个常用的样式调整,分别是以下三个

1.给Table表单添加无缝隙边框;这个功能之前有过整理,现在复习一下

2.将a标签里面的超链接样式变成相同的,不会随着鼠标点击而变化;
3.不是使用Checked或Readio实现单向选中功能(若是多项可以在点击方法去掉删除样式的代码即可);

CSS源码:


JS代码及其文件:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function CheckeClick(trthis)
{
//自动去掉之前选中的记录
$(".Selected").each(function(){
$(this).removeClass("Selected");
});
//设置当前选中行的样式Selected
$(trthis).addClass("Selected");
}
</script>

  HTML代码

最终效果:

Jquery+CSS在不使用Checked的情况下实现当前选中行样式变化的更多相关文章

  1. jQuery validate在没有校验通过的情况下拒绝提交

    下面通过一个简单的例子说明,这个问题,可能是很多人遇到的,验证不通过的时候,依然提交了表单. HTML <form class="survey" id="surve ...

  2. Jquery.Datatables td宽度太长的情况下,自动换行

    在 td 里面 加上 style="word-wrap:break-word;" 自动换行就好了,如果不想换行,可以将超出内容设为隐藏, overflow:hidden; whit ...

  3. 【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG

    一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对 ...

  4. jQuery+css+div一些值得注意的常用语句

    一.div页面布局 一个好的页面布局很重要,这会让你写代码的时候层次分明: 以2列左侧固定右侧自适应宽度为例子: 这是HTML代码: <!DOCTYPE html PUBLIC "-/ ...

  5. jquery Tab默认情况下自动切换

    <!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...

  6. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  7. js jquery css 选择器总结

    js jquery css 选择器总结 一.原始JS(Document 对象)选择器. id选择器:document.getElementById("test"); name选择器 ...

  8. jquery checkbox反复调用attr('checked', true/false)只有第一次生效 Jquery 中 $('obj').attr('checked',true)失效的几种解决方案

    1.$('obj').prop('checked',true) 2. $(':checkbox').each(function(){ this.checked=true; }) 为什么:attr为失效 ...

  9. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

随机推荐

  1. 阿里云Centos操作Mysql

    1.  CentOS7 yum方式安装MySQL5.7 2.Centos下mysql导入sql 3.Centos设置远程 4.CentOS下mysql数据库常用命令总结 5.centos出现“Fire ...

  2. 斐波那契数列n项的值。(递归和非递归算法Golang实现)

    递归实现: func f(num int) int { if num == 1 || num == 2 { return 1 } return f(num-1) + f(num-2) } 非递归实现: ...

  3. SpringBoot运行时动态添加数据源

    此方案适用于解决springboot项目运行时动态添加数据源,非静态切换多数据源!!! 一.多数据源应用场景: 1.配置文件配置多数据源,如默认数据源:master,数据源1:salve1...,运行 ...

  4. 关于javascript中的prototype

    作为一个致力于前端开发的人员,能够熟练掌握javascript的原理和机制是每个小白的必经之路,这也是最痛苦的.有人说前端功力好不好最主要的就是看对js的掌握能力,有人说十年也啃不完一门javascr ...

  5. Mysql高手系列 - 第24篇:如何正确的使用索引?【高手进阶】

    Mysql系列的目标是:通过这个系列从入门到全面掌握一个高级开发所需要的全部技能. 欢迎大家加我微信itsoku一起交流java.算法.数据库相关技术. 这是Mysql系列第24篇. 学习索引,主要是 ...

  6. python编程基础之三十六

    文件处理:文件处理包括读文件,写文件 读文件: 1.打开文件 2.读取文件 3.关闭文件 写文件: 1.打开文件 2.写如文件 3.关闭文件 无论是读取文件还是写文件都时需要打开文件,和关闭文件 打开 ...

  7. python编程基础之三十一

    面向对象:一开始接触面向对象其实感觉不好用,但是对于一些复杂的问题,使用面向对象其实更加容易,逻辑不容易混乱 它的核心是:类 和 对象 类:对一系列事物的抽象概念,可以视为一张图纸, 对象:就是对类这 ...

  8. java集合类之ArrayList详解

    一.ArrayList源码分析 1.全局变量 (1)默认容量(主要是通过无参构造函数创建ArrayList时第一次add执行扩容操作时指定的elementData的数组容量为10) private s ...

  9. redis之spring应用

    前言 读本文之前,需要大家对redis有所了解,大家可以去看一下我之前分享的redis安装及简单使用这一随笔,而本文我将跟大家分享学习一下redis与spring的集成.当然,首先需要打开我们的red ...

  10. USART_FLAG_TXE和USART_FLAG_TC

    在串口数据发送操作中,代码一般是这样写的: void USART_SendByte(USART_TypeDef* USARTx, uint8_t Data) { while(USART_GetFlag ...