隔行变色

最新推荐文章于 2022-12-30 00:40:13 发布
最新推荐文章于 2022-12-30 00:40:13 发布
阅读量143 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhou742626/article/details/78755486
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/gehangbianse.css"/>
        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
 //隔行变色
             $("tr:even").addClass("even");
             $("tr:odd").addClass("odd");
 
 //点击变色
             $("tr").click(function(){
               $(this).css("background","burlywood").siblings().css("background","");
             });
 //滑动变色
             $("tr").mouseover(function (){
             $(this).addClass("se");
             }).mouseout(function (){
  $(this).removeClass("se");
 });
 
});
</script>
    </head>
    <body>
        <table id="table">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>20</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>男</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>20</td>
                <td>男</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>20</td>
                <td>男</td>
            </tr>
        </table>
    </body>
</html>


*{
    margin: 0px auto;
    padding: 0px;
}
#table{
    width: 200px;
    height: 300px;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}
td{
    border: 1px solid black;
}
.even{
 background-color:pink;
}
.odd{
 background-color:#33cc99;
}
.selected{
 background-color:black;
}
.se{
 background-color:#666;
}



你的孤独虽败犹荣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery选取商品隔行变色
09-22
在网页设计中，为了提升用户体验和视觉效果，我们经常需要对数据列表进行美化处理，比如隔行变色。"jQuery选取商品隔行变色"是一个常见的网页交互功能，主要用于电商网站的商品列表展示，使得用户在浏览长列表时能更...
简单实现jquery隔行变色
10-19
在前端开发过程中，使用jQuery来实现隔行变色效果是一种常见的需求，能够帮助改善用户界面的可读性，使得表格、列表等元素的展示更加人性化。本文将详细介绍如何通过jQuery实现隔行变色的几种方法，并提供具体实例...
纯css之隔行换色
小码农吗
12-15 2037
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3隔行变换色</title> <style type="text/css"> #list1 li:nth-of-type(odd){ background:#00ccff;}奇数行 #list1 li:nth-of-type(even){ backgro
CSS表格隔行变色
闪电⚡之王的博客简介
12-30 459
【代码】CSS表格隔行变色。
总结html，css中的各种换行方法
热门推荐
南北极之间
01-18 2万+
一般情况下，元素拥有默认的white-space:normal（自动换行，不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子做的），超过容器宽度时就会把容器撑大，不换行。例如英语，浏览器会根据容器尺寸，选择在半角空格或连字符处换行。在页面中出现大段的文字，通常采用分段进行规划，对换行也有极其严格的划分。normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
css实现效果隔行变色
努力奔跑的小不点
05-18 1299
主要需要使用到结构伪选择器 E:nth-child(n) n可以是数字(1,2,3),关键字(odd,even),公式(2n,2n+3),数字是从1开始的,不是0.如: tr:nth-child(3)匹配所有表格里第3行的tr tr:nth-child(2n+1)匹配所有表格的奇数行 tr:nth-child(2n)匹配所有的偶数行 tr:nth-child(odd)匹配所有的奇数行 tr:nth-child(even)匹配所有的偶数行 eg: li:nth-of-type(odd){backgrou
Table隔行变色的JavaScript代码
10-28
在本段内容中，主要讲述了如何使用JavaScript（js）来实现表格（table）的隔行变色效果，同时响应鼠标交互事件，即鼠标悬停时改变行的背景颜色。以下是详细的知识点解析： 1. 表格隔行变色实现原理：利用JavaScript...
纯js实现隔行变色效果
10-18
比如，实现隔行变色效果就是一个典型的应用场景，这样可以提高用户的阅读体验。隔行变色，即在页面中以交替的形式给表格的行应用不同的背景颜色，以达到视觉上的区分效果。本文将详细介绍如何使用纯JavaScript代码...
JS实现列表页面隔行变色效果
10-20
在网页设计中，隔行变色是一种常见的视觉优化手段，可以使列表内容更加清晰易读。在本例中，我们将探讨如何使用JavaScript实现列表页面的隔行变色效果。这个效果通常应用于表格，使得用户在浏览数据时能更快地区分每...
jQuery实现简单隔行变色的方法
10-22
关于使用jQuery实现表格中隔行变色效果的详细知识点主要涉及以下几个方面： 1. jQuery的基础知识：首先需要了解jQuery是一个快速、小巧且功能丰富的JavaScript库，它通过简化HTML文档遍历、事件处理、动画和Ajax...
php简单隔行变色功能实现代码 原创
12-30
本文简单分析了php简单隔行变色功能实现方法。...echo 隔行变色效果：; echo ; for($i=1;$i<=5;$i++){ if($i%2==0){ $color=yellow; } if($i%2==1){ $color=red; } echo ;\>这是第.$i.行; } echo ; 希望本
实现表格的隔行变色
11-13
在网页设计中，为了提升数据展示的可读性和美观性，常常会采用隔行变色的技巧来对表格进行美化。隔行变色使得用户在查看大量数据时能更容易地区分每一行，从而减轻视觉疲劳，提高阅读效率。本文将详细讲解如何实现...
WinForm DataGridView控件隔行变色的小例子
12-31
代码如下: dgv.Rows[i].DefaultCellStyle.BackColor ... 代码如下:///  /// 隔行变色 ///  /// ”dgv”>传入DataGridView控件名称 public static void DgvRowColor(System.Windows.Forms.DataGridView dgv) { if
jQuery实现的隔行变色功能【案例】
10-17
隔行变色是一种常见的网页样式展示技巧，主要用于改善用户的阅读体验。通过为列表中的奇数项或偶数项设置不同的背景色，可以让用户更容易区分相邻的行，尤其在较长的列表中效果更为明显。 在本案例中，使用了jQuery...
实现表格隔行变色的方法
weixin_42771133的博客
08-29 2468
css实现表格隔行变色： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #data{ border-collapse: collapse;
实现表格隔行/隔列变色
young的博客
11-13 3562
table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73B1E0;color:#FFF;}
css :nth-child(even) 实现表格 隔行变色
逆风优雅的博客
01-07 586
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
HTML&CSS实现表格隔行显示
weixin_30699831的博客
01-04 481
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="C...
jquery隔行变色
最新发布
06-20
要实现表格（通常是 `<table>`）隔行变色，你可以使用 jQuery 的 `each()` 方法结合 CSS 类选择器。以下是一个简单的示例： ```javascript $(document).ready(function() { // 获取所有的 table 行 var rows = $...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值