Jquery+CSS在不使用Checked的情况下实现当前选中行样式变化

时间:2023-03-09 19:33:30
Jquery+CSS在不使用Checked的情况下实现当前选中行样式变化

之前在做一个当前选中行样式变化时发现网上很多方法都是利用在行内添加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的情况下实现当前选中行样式变化