返回顶部
首页 > 资讯 > 前端开发 > html >如何使用JQ完成表格隔行换色效果
  • 843
分享到

如何使用JQ完成表格隔行换色效果

2024-04-02 19:04:59 843人浏览 泡泡鱼
摘要

这篇文章主要介绍如何使用JQ完成表格隔行换色效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、步骤分析:第一步:引入Jquery的类库第二步:直接写页面加载函数第三步:直接使用j

这篇文章主要介绍如何使用JQ完成表格隔行换色效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

1、步骤分析:

第一步:引入Jquery的类库

第二步:直接写页面加载函数

第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)

第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。

2、具体代码实现:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>使用jQuery完成表格隔行换色</title>
  <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  <script>
   //1.页面加载
   $(function(){
    //2.获取tbody下面的偶数行并设置背景颜色
    $("tbody tr:even").css("background-color","Gold");
    //3.获取tbody下面的奇数行并设置背景颜色
    $("tbody tr:odd").css("background-color","pink");
   });
  </script>
 </head>
 <body>
  <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
   <thead>
    <tr>
     <th>编号</th>
     <th>姓名</th>
     <th>年龄</th>
    </tr>
   </thead>
   <tbody>
    <tr >
     <td>1</td>
     <td>张三</td>
     <td>22</td>
    </tr>
    <tr >
     <td>2</td>
     <td>李四</td>
     <td>25</td>
    </tr>
    <tr >
     <td>3</td>
     <td>王五</td>
     <td>27</td>
    </tr>
    <tr >
     <td>4</td>
     <td>赵六</td>
     <td>29</td>
    </tr>
    <tr >
     <td>5</td>
     <td>田七</td>
     <td>30</td>
    </tr>
    <tr >
     <td>6</td>
     <td>汾九</td>
     <td>20</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

3、真正开发时一般CSS样式已经由美工写好,此时可以使用jquery的CSS类操作

具体代码如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>使用jQuery完成表格隔行换色</title>
  <link rel="stylesheet" href="../css/style.css" rel="external nofollow" />
  <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  <script>
   //1.页面加载
   $(function(){
    //2.获取tbody下面的偶数行并设置背景颜色
    $("tbody tr:even").addClass("even");
    //3.获取tbody下面的奇数行并设置背景颜色
    $("tbody tr:odd").addClass("odd");
   });
  </script>
 </head>
 <body>
  <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
   <thead>
    <tr>
     <th>编号</th>
     <th>姓名</th>
     <th>年龄</th>
    </tr>
   </thead>
   <tbody>
    <tr >
     <td>1</td>
     <td>张三</td>
     <td>22</td>
    </tr>
    <tr >
     <td>2</td>
     <td>李四</td>
     <td>25</td>
    </tr>
    <tr >
     <td>3</td>
     <td>王五</td>
     <td>27</td>
    </tr>
    <tr >
     <td>4</td>
     <td>赵六</td>
     <td>29</td>
    </tr>
    <tr >
     <td>5</td>
     <td>田七</td>
     <td>30</td>
    </tr>
    <tr >
     <td>6</td>
     <td>汾九</td>
     <td>20</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

在谷歌浏览器内运行,就实现了表格隔行换色的效果。

以上是“如何使用JQ完成表格隔行换色效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网html频道!

--结束END--

本文标题: 如何使用JQ完成表格隔行换色效果

本文链接: https://www.lsjlt.com/news/77443.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何使用JQ完成表格隔行换色效果
    这篇文章主要介绍如何使用JQ完成表格隔行换色效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、步骤分析:第一步:引入jquery的类库第二步:直接写页面加载函数第三步:直接使用j...
    99+
    2024-04-02
  • 如何利用JS动态生成隔行换色HTML表格
    这篇文章将为大家详细讲解有关如何利用JS动态生成隔行换色HTML表格,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。用JS生成动态生成表格,行、列由用户输入,并使表格隔行换...
    99+
    2024-04-02
  • 如何使用jQuery实现隔行变色效果
    这篇文章主要介绍了如何使用jQuery实现隔行变色效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何使用jQuery实现隔行变色效果文章都会有所收获,下面我们一起来看看吧。...
    99+
    2024-04-02
  • JS如何实现隔行换色的表格排序
    这篇文章给大家分享的是有关JS如何实现隔行换色的表格排序的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1、获取元素    2、获取数据 &...
    99+
    2024-04-02
  • android表格效果之ListView隔行变色实现代码
    首先继承SimpleAdapter 代码如下: package meetweb.net.util; import java.util.List; import java.ut...
    99+
    2022-06-06
    listview Android
  • JS如何实现表格隔行变色
    这篇文章主要为大家展示了“JS如何实现表格隔行变色”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何实现表格隔行变色”这篇文章吧。具体内容如下用到的鼠标事件:(1)鼠标经过 onmouseo...
    99+
    2023-06-29
  • 如何使用JavaScript的%做隔行换色
    这篇文章将为大家详细讲解有关如何使用JavaScript的%做隔行换色,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。如下所示:<html> <head&...
    99+
    2024-04-02
  • JS如何实现列表页面隔行变色效果
    小编给大家分享一下JS如何实现列表页面隔行变色效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!先看看隔行变色效果:代码:<...
    99+
    2024-04-02
  • V5填报表如何通过 JS 实现实现隔行异色的效果
    V5填报表如何通过 JS 实现实现隔行异色的效果,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。V5 版本填报表单元格属性中,单元格的前景背景颜色没有提供浏览式报表的表达式属...
    99+
    2023-06-04
  • css如何实现鼠标点击表格变色效果
    这篇文章主要介绍了css如何实现鼠标点击表格变色效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 在css中,...
    99+
    2024-04-02
  • js如何使用^来完成值交换
    这篇文章主要介绍了js如何使用^来完成值交换,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。使用^来完成值交换在 ES6 的解构赋值出来之前,用这种方式会更快(但必须是整数):...
    99+
    2023-06-27
  • Vue表格隐藏行折叠效果如何实现
    这篇“Vue表格隐藏行折叠效果如何实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue表格隐藏行折叠效果如何实现”文章吧...
    99+
    2023-07-06
  • 如何使用spin.js生成等待效果
    这篇文章将为大家详细讲解有关如何使用spin.js生成等待效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果截图<%@ page langu...
    99+
    2024-04-02
  • 如何使用content换行技术实现字符animation loading效果
    这篇文章主要介绍如何使用content换行技术实现字符animation loading效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、之前我的字符loading实现关于字符打...
    99+
    2024-04-02
  • 如何使用HTML颜色代码创建3D效果?
    想要网页设计时给它一些3D效果,但苦于不知道怎么下手?别担心,本文将为大家介绍如何使用HTML颜色代码创建3D效果。通过使用不同的颜色代码和CSS属性,可以创造出具有透视感和深度的3D效果。本文将提供具体的操作步骤和示例代码,帮助您轻松...
    99+
    2024-02-14
    HTML颜色代码 3D效果 CSS 透视 深度
  • 如何使用JavaScript实现钟表效果
    小编给大家分享一下如何使用JavaScript实现钟表效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容如下<!DOCTYPE html><html lang="en...
    99+
    2023-06-26
  • 如何使用HTML颜色代码创建渐变效果?
    渐变效果是一种将多种颜色平滑过渡的技术,在网页设计中广泛应用。使用 HTML 颜色代码可以轻松创建渐变效果,无需使用任何额外的工具或技能。 要使用 HTML 颜色代码创建渐变效果,需要使用 CSS 的 linear-gradient()...
    99+
    2024-02-14
    HTML颜色代码 渐变效果 网页设计 CSS
  • 如何使用HTML颜色代码创建阴影效果?
    阴影效果在网站设计中经常被用于突出元素,吸引用户注意或提供视觉深度。我们来看看如何利用 HTML 颜色代码实现阴影效果吧。 一、基础知识 HTML 颜色代码:用于设置元素的颜色,由16进制数字或颜色名称组成。 RGBA 颜色值: rgb...
    99+
    2024-02-14
    阴影, HTML, CSS, 代码
  • 如何使用CSS实现Tab页切换效果
    这篇文章主要介绍如何使用CSS实现Tab页切换效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!三种写法:利用 :hover 选择器缺点:只有鼠标在元素上面的时候才有效果,无法实现选中和默认显示某一个的效果利用 a标...
    99+
    2023-06-08
  • 如何实现element-ui表格中勾选checkbox高亮当前行效果
    这篇文章主要介绍了如何实现element-ui表格中勾选checkbox高亮当前行效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。我们在做...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作