之前在做一个当前选中行样式变化时发现网上很多方法都是利用在行内添加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. JavaSE----01.Java简介

    01.Java简介 1.java介绍     Java是于1995年由Sun公司推出的一种跨平台.面向对象的高级程序设计语言.Java最初的名字叫OAK.Java是一种通过解释方式来执行的语言,其语法 ...

  2. Nginx简单介绍以及linux下使用Nginx进行负载均衡的搭建

    1.Nginx简介 Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.由俄罗斯的程序设计师Igor Sysoev所开发,官方测试nginx能够支支撑5 ...

  3. css3:bacground-size

    个人博客: https://chenjiahao.xyz CSS3之背景尺寸Background-size是CSS3中新加的一个有关背景的属性,这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸 ...

  4. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

  5. intellj Idea git ignore文件的.idea不起作用解决

    问题描述: idea中使用git每次提交的时候都会选中项目目录下.idea目录,虽然设置了.ignore文件但是不起作用. 综合网上搜索结果,并完美解决,方法如下: 1.原因就是git已经关联追踪了这 ...

  6. opencv之形态变换

    形态变换 在opencv之膨胀与腐蚀中介绍了Dilation/Erosion的原理.建议先读这一篇,搞懂原理. 这样就可以很轻松地理解为什么本文的这些形态变换可以取得相应的效果. 基于此,我们可以组合 ...

  7. 索引的底层实现(B 树)

    一.B 树 1.B-Tree介绍 B-树的搜索,从根结点开始,对结点内的关键字(有序)序列进行二分查找,如果命中则结束,否则进入查询关键字所属范围的儿子结点:重复,直到所对应的儿子指针为空,或已经是叶 ...

  8. NOIP2011计算系数;

    #include<cmath> #include<algorithm> #include<stdio.h> #include<iostream> #de ...

  9. SSH服务协议

    1.SSH介绍: SSH 是Secure Shell Protocol 的简写,由IETF网络小组(Network Working Group)制定:在进行数据传输之前,SSH先对联机数据包通过加密技 ...

  10. python学习(数据类型)

    基本数据类型 (1)numbers 数字 %d 整型 int 长整型 Long 布尔型 boor True False %f 浮点型 float 3.1415926 4.2E-10 复数 comple ...