当前位置:小鱼儿玄机二站 > 计算机网络 > 遵照jQuey达成鼠标滑过变色,使用JQ落成表格隔行

遵照jQuey达成鼠标滑过变色,使用JQ落成表格隔行

文章作者:计算机网络 上传时间:2019-09-03

在好多网址都有如此的功能,那便是当鼠标放在新闻列表一行上的时候,整行就能够变色,固然使用CSS也能够完毕此种功用,不过出于广大浏览器版本对于CSS3并从未赏心悦目标支持,所以在当前情状下,使用jQuery实现此种成效是三个准确的抉择。

1、步骤剖析:

废话十分的少说了,直接给大家贴jquery代码了,具体代码如下所示:

第一步:引入jquery的类库

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
ul,li{
 list-style:none;
 font-size:12px;
}
li{
 width:250px;
 height:25px;
 line-height:25px;
}
.hover{
 background-color:#666;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 jQuery.hoverPlugin={
  hover:function(selector){
   $(selector).hover(function(){
    $(this).addClass("hover");
   },function(){
    $(this).removeClass("hover");
   });
  }
 };
 $.hoverPlugin.hover(".mytest li");
});
</script>
</head>
<body>
<ul class="mytest">
 <li>1.俄罗斯爆发陨石雨,导致上千人受伤</li>
 <li>2.朝鲜成功进行核试验,半岛无核进程终结</li>
 <li>3.中国进入春运高峰期</li>
</ul>
</body>
</html> 

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

上述代码完毕了所需功用,固然相当不足美丽,能够依照实际要求自动修改。达成的不二诀要也不行的简便,就是选拔hover()方法为hover事件绑定四个事件管理函数,以丰盛只怕去除设置li成分背景颜色的CSS代码。

其三步:直接利用jquery的选拔器(组合选拔)获得要求操作的因素(奇数行和偶数行)

以上代码也很简短,大家有哪个地方不明了的地点接待给自家留言,作者会即刻给我们答疑的,同有的时候候感激大家长期以来对剧本之家网址的帮忙。

第四步:分别选取CSS的章程(css(name,value))对奇数行和偶数行设置背景颜色。

您或者感兴趣的小说:

  • jquery落成效益比较好的table选中央银行颜色
  • jQuery轻便完成表格的隔行变色和点击行变色的实例代码
  • jquery入门—采纳器完毕隔行变色实例代码
  • jQuery完成Table表格隔行变色及高亮展现当前接纳行效果示例
  • JS与jQuery完毕隔行变色的法子
  • jQuery完结选中央银行变色效果(实例批注)

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>

在Google浏览器内运转,就兑现了报表隔行换色的成效。

以上那篇使用JQ完成表格隔行换色的归纳实例便是笔者分享给大家的全部内容了,希望能给我们三个参阅,也指望我们多多补助脚本之家。

你可能感兴趣的篇章:

  • jQuery轻易完毕表格的隔行变色和点击行变色的实例代码
  • 使用jquery hover事件达成表格的隔行换色成效示例
  • 利用简单的jQuery方法达成隔行换色功效
  • jquery隔行换色效果落到实处际意况势
  • JS与jQuery完毕隔行变色的主意

本文由小鱼儿玄机二站发布于计算机网络,转载请注明出处:遵照jQuey达成鼠标滑过变色,使用JQ落成表格隔行

关键词: