jQuery:表格的奇偶行变色

最新推荐文章于 2022-06-22 10:14:36 发布

吉普赛的歌

最新推荐文章于 2022-06-22 10:14:36 发布

阅读量1.8k

点赞数

分类专栏： # jQuery 文章标签： jquery function border table html

本文链接：https://blog.csdn.net/yenange/article/details/5859768

版权

jQuery 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<html>
  <head>
    <title>表格变色</title>
    <style type="text/css">
        .mouseOver { background-color: #f6d7d7; }
        .odd { background-color: #f9fceb;}
        .even { background-color: #d4f1fb;}
        .first {background-color: #ffffff;}
    </style>
   <script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript" ></script>
   <script type="text/javascript">
           $(function(){
                $("tr:odd").addClass("odd");        //加奇行样式
                $("tr:even").addClass("even");        //加偶行样式
                $("tr:first").addClass("first");    //为第一行加样式
                //为行元素加上鼠标移入和移出事件
				$("tr:gt(0)").mouseover(function() {
				    currClass=$(this).attr("class");
					$(this).attr("class","mouseOver");
				}).mouseout(function() {
					$(this).attr("class",currClass);
                });
           })
   </script>
  </head>
  <body>
      <table border="1">
          <tr><td>姓名</td><td>年龄</td></tr>
          <tr><td>王华</td><td>18</td></tr>
          <tr><td>刘云</td><td>19</td></tr>
          <tr><td>刘亮</td><td>15</td></tr>
          <tr><td>叶子</td><td>17</td></tr>
          <tr><td>刘梦</td><td>20</td></tr>
      </table>
  </body>
</html>

<html>
  <head>
    <title>表格变色</title>
    <style type="text/css">
        .mouseOver { background-color: #f6d7d7!important; }
        .odd { background-color: #f9fceb;}
        .even { background-color: #d4f1fb;}
        .first {background-color: #ffffff;}
    </style>
   <script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript" ></script>
   <script type="text/javascript">
           $(function(){
                $("tr:odd").addClass("odd");        //加奇行样式
                $("tr:even").addClass("even");        //加偶行样式
                $("tr:first").addClass("first");    //为第一行加样式
                //为行元素加上鼠标移入和移出事件
				$("tr:gt(0)").mouseover(function() {
					$(this).addClass("mouseOver");
				}).mouseout(function() {
					$(this).removeClass("mouseOver");
                });
           })
   </script>
  </head>
  <body>
      <table border="1">
          <tr><td>姓名</td><td>年龄</td></tr>
          <tr><td>王华</td><td>18</td></tr>
          <tr><td>刘云</td><td>19</td></tr>
          <tr><td>刘亮</td><td>15</td></tr>
          <tr><td>叶子</td><td>17</td></tr>
          <tr><td>刘梦</td><td>20</td></tr>
      </table>
  </body>
</html>