js隔行,滑动,点击 变色

最新推荐文章于 2022-11-29 19:45:44 发布
最新推荐文章于 2022-11-29 19:45:44 发布
阅读量153 收藏
点赞数
分类专栏： js应用 文章标签： js隔行 滑动 点击 变色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuxq0505/article/details/84093535
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>cssrain - demo</title>
<SCRIPT LANGUAGE="JavaScript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--

$(document).ready(function(){
//demo1:
//-隔行,滑动,点击 变色
$('.cssraindemo1 tbody tr:even').addClass('odd');
$('.cssraindemo1 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
$('.cssraindemo1 tbody tr').click(
function() {$(this).toggleClass('selected');}
);

//demo2:
$('.cssraindemo2 tbody tr:even').addClass('odd');
$('.cssraindemo2 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);

// 如果复选框默认情况下是选择的，变色.
$('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 复选框
$('.cssraindemo2 tbody tr').click(
function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).find('input[type="checkbox"]').removeAttr('checked');
} else {
$(this).addClass('selected');
$(this).find('input[type="checkbox"]').attr('checked','checked');
}
}
);

//demo3:
$('.cssraindemo3 tbody tr:even').addClass('odd');
$('.cssraindemo3 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);

// 如果单选框默认情况下是选择的，变色.
$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');

// 单选框
$('.cssraindemo3 tbody tr').click(
function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
$(this).find('input[type="radio"]').attr('checked','checked');
}
);


});




//-->
</SCRIPT>


<style type="text/css">
h1 { font:bold 20px/26px Arial;}
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
tr.odd { background:#FFF3BF;}
tr.highlight { background:#6F4DFF;}
tr.selected { background:#aaaaaa;color:#fff;}
</style>




<!-- demo1 -->
<h1>Demo1--隔行,滑动,点击 变色.</h1>
<table class="cssraindemo1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>


<!-- demo2 -->
<h1>Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.</h1>
<table class="cssraindemo2">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" checked/></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" checked/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>

</tbody>
</table>



<!-- demo3 -->
<h1>Demo3--隔行,滑动,点击 变色.+ 单选框选中的行 变色.</h1>
<table class="cssraindemo3">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="tablechoice" value=""/></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" checked /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>

</tbody>
</table>
wuxq0505
关注
专栏目录
JS之隔行变色
小书包的博客
01-09 927
JS之隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色</title> </head> <style> * { margin: 0px; padding: 0px; } di...
通过js实现表格隔行变色，基数行是颜色1，偶数行是颜色2，当鼠标经过某一行时，该行颜色为颜色3。
m0_57675124的博客
05-28 1150
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <table border="1" cellspacing="0" width="400px"> <thead> <tr style="background-color: choc.
js实现隔行变色
热门推荐
zhang的博客
10-16 1万+
&lt;body&gt; &lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&
js 实现隔行变色
WDS的博客
03-26 1223
隔行变色
点击单选按钮 实现表格的隔行变色
HUMHSX的专栏
03-27 1427
/*定义了三个样式*/ .once{ background-color:#0FC; } .after{ background-color:#F00; } .selected1{ background-color:#33C; } 无标题文档 //使用jquery绑定事件 $(document).ready(function ()
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
10-21
在本教程中，我们将探讨如何利用 jQuery 来实现表格的隔行变色、滑动变色以及点击变色功能。这些技巧能够使网页中的表格更加美观且交互性更强。 首先，我们要明白jQuery中的`$(document).ready()`函数，它表示当...
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
10-22
除此之外，本文还介绍了滑动变色的效果，即当鼠标移动到某一行上时，该行的背景颜色会改变；当鼠标离开时，颜色又恢复到原始状态。这同样是通过为表格行添加mouseover和mouseout事件来实现的，利用jQuery的addClass...
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
01-19
废话不多说了，直接给大家贴代码了，具体代码如下所示： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <html> <head> <!-- 引入的css压缩文件 -->...tabl
jquery操作表格隔行,滑动,点击,变色
03-22
在“jquery操作表格隔行,滑动,点击,变色”这个主题中，我们将深入探讨如何使用jQuery来增强HTML表格的功能，包括隔行变色、滑动效果、点击响应以及多选框选中行的变色。 1. **隔行变色**：在HTML表格中，为了提高...
js实现滑块拖动更改div颜色
src_chao1的博客
02-15 1787
思路： 首先既然是滑块拖动，那就必须要先把小滑块做出来。接着我们可以通过设置三条滑块，对应颜色中的rgb，然后通过js设置div的background-color就可以了。 而滑块拖动本质上来说就是div的拖动，话不多说直接上代码： let line = 0; //确定鼠标按下，防止滑块在鼠标未按下时移走 let oldB = 0; //滑块的原位置 let oldM = 0; //鼠标的原位置 let oObj ; //获取滑块对象（原谅我起变量名字随意了一点） //鼠标
jquery 隔行变色 点击切换
随波主流
03-03 187
$("#add").toggle( function () { $("#adduser").css({"display":"block"}); }, function () { $("#adduser").css({"display":"none"}); } ); );   $(d
点击按钮修改背景颜色及节点操作隔行变色案例
weixin_33889665的博客
11-30 324
<input type="button" value="点击设置" id="dtn"/><div id="dd"> <span>这是一个span</span> <p>这是一个p</p> <span>这是一个span</span> <p>这是一个p</p> ...
jQuery--表格隔行变色
qq_52567967的博客
09-27 2725
jQuery--表格隔行变色
Javascript知识【jQuery样式操作&案例：jQuery隔行换色】
日常学习总结
08-11 4887
主要介绍jQuery操作css样式，以及巩固知识的一个案例用jQuery进行隔行换色
使用JavaScript实现点击按钮实现隔行换色
最新发布
song17631538490的博客
11-29 819
给按钮标签设置点击事件给按钮后续使用if语句进行判断因flag默认值为true所以if（flage）=if(true) 就会执行if语句下的代码。设置循环主要是为了将li标签全部循环一遍因为是隔行变色所以通过i%2==0获取到不相邻的两个数后续修改下标不相邻两个数的li标签设置新的class属性 从而实现点击后隔行换色的效果。添加flage是为了让按钮可以重复点击使用点击第一次 运行的是if（fage）里的代买再点击一次 运行的是else里的代码。
财经类的表格变色写法 几行代码搞定 简单易懂
SanRenKing的博客
11-27 223
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m
JS 节点的方式实现隔行变色
夏沐的博客
10-14 495
在HTML中，节点的个数指的是标签、文本的总个数，所以在以下代码中：标签<ul>中，共还有17个节点，但是只有8个标签，但是需要的是标签的背景变色，因此不可以使用【i】作为标签的角标。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl...
jQuery实现表格样式操作：隔行变色滑动与点击切换
本文将详细介绍如何使用jQuery实现表格的样式增强功能，包括隔行显示、滑动效果以及点击时的颜色变换。作者通过详细的代码示例来演示两种不同的方法，旨在提供一个可供参考的实践教程。 首先，我们关注的是隔行效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值