之前在做一个当前选中行样式变化时发现网上很多方法都是利用在行内添加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. dubbo配置负载均衡、集群环境

    再用dubbo作为项目架构的时候,给consumer消费者用nginx提供了负载均衡策略和集群的实现, 但是想了下,consumer再多,但是提供者还是一个,最后还不都是落到了这一个provider上 ...

  2. 关于IDEA的Maven打jar包springboot项目问题,打成可执行jar包,IDEA创建的maven项目和spring initializr项目

    Spring Initializr创建的项目 源文件地址 https://github.com/TaoPanfeng/maven-package 项目的创建步骤 进行打包 clear package ...

  3. javascript关键字typeof、instanceof、constructor判断类型

    鉴于 ECMAScript 是松散类型的,因此需要有一种手段来检测给定变量的数据类型.对于这个问题,JavaScript 也提供了多种方法,但遗憾的是,不同的方法得到的结果参差不齐. 下面介绍常用的几 ...

  4. Java容器总结

    容器总结 Java容器工具包框架图 List,Set,Map三者的区别 List(对付顺序的好帮手): List接口存储一组不唯一(可以有多个元素引用相同的对象),有序的对象 Set(注重独一无二的性 ...

  5. 【POJ2001】Shortest Prefixes

    Shortest Prefixes Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 18724   Accepted: 810 ...

  6. Linux之常用命令II

    一.VI编辑器 1) 概述 ◆  Visual Interface(可视化接口): ◆  类似Windows中的记事本,比记事本强大: ◆  VIM相对于VI做了哪些提升 -VIM支持多级撤销 -VI ...

  7. [USACO10NOV]奶牛的图片Cow Photographs

    题目描述 Farmer John希望给他的N(1<=N<=100,000)只奶牛拍照片,这样他就可以向他的朋友炫耀他的奶牛. 这N只奶牛被标号为1..N. 在照相的那一天,奶牛们排成了一排 ...

  8. linux下执行脚本失败的解决办法

    现象: 1的解决办法:赋予该文件可执行权限即可,chmod +x docker.sh 2的解决办法:https://blog.csdn.net/youzhouliu/article/details/7 ...

  9. 利用requests和BeautifulSoup爬取菜鸟教程的代码与图片并保存为markdown格式

    还是设计模式的开卷考试,我想要多准备一点资料,于是写了个爬虫爬取代码与图片,有巧妙地进行格式化进一步处理,最终变为了markdown的格式 import requests from bs4 impor ...

  10. VUE图片剪辑插件 React图片剪辑插件

    React图片剪辑插件: https://github.com/roadmanfong/react-cropper React图片剪辑插件: https://github.com/xyxiao001/ ...