隔行换色并且鼠标指向行变色的表格

小咪咪 2022-05-12 00:36 215阅读 0赞

**一 应用**

对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时，可以为表格添加隔行换色并且鼠标指向行变色功能。

**二 代码**

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
    <style type="text/css">
    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;
    }
    .odd{background:#cef;}       /*设置奇数行样式*/
    .even{background:#ffc;}      /*设置偶数行样式*/
    .light{background:#00A1DA;}  /*设置鼠标移到行的样式*/
    </style>
    <table>
      <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>	
      </tbody>
    </table>
    <script type="text/javascript">
    $(document).ready(function(){
      $("tbody tr:even").addClass("odd");                    //为偶数行添加样式
      $("tbody tr:odd").addClass("even");                     //为奇数行添加样式
      $("tbody tr").hover(                                   //为表格主体每行绑定hover方法
            function() {$(this).addClass("light");},
            function() {$(this).removeClass("light");}
      );
    });
    </script>

**三 运行效果**

![f7697024-52da-36ff-a135-3de96d84d287.png][]

**四 运行说明**

:even用于获取索引值为偶数的元素，:odd用于获取索引值为奇数的元素。

[f7697024-52da-36ff-a135-3de96d84d287.png]: /images/20220512/fe38a251f621459fbcfa2f41a4f56f96.png

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 Layui列表隔行换色

> <table> > <tbody> > <tr> > <td> <p><strong>Layui常用总结</strong></p> </td> >

阳光穿透心脏的1/2处/ 2023年01月07日 12:22/ 0 赞/ 430 阅读

相关鼠标事件之表格隔行换色

鼠标经过离开变色案例：效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

末蓝、/ 2022年11月22日 10:13/ 0 赞/ 188 阅读

相关用jstl实现表格的隔行换色

jstl的隔行换色在tr标签的里边加上代码： <tr ${ vs.count%2==1? "style='background-color:red'" : "

淩亂°似流年/ 2022年06月08日 08:12/ 0 赞/ 194 阅读

相关 js之表格隔行换色

步骤分析：第一步：确定事件(onload)并为其绑定一个函数第二步：书写函数(获取表格) 第三步：获取tbody里面的行数第四步：对tbody里面的行进行

╰+攻爆jí腚メ/ 2022年05月31日 08:51/ 0 赞/ 202 阅读

相关隔行换色并且鼠标指向行变色的表格

一应用对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时，可以为表格添加隔行换色并且鼠标指向行变色功能。二代码 <s

小咪咪/ 2022年05月12日 00:36/ 0 赞/ 216 阅读

相关使用jQuery完成表格隔行换色

addClass(class):为每个匹配的元素添加指定的类名。 HTML 代码: <p>Hello</p> jQuery 代码: $("p").a

绝地灬酷狼/ 2022年04月21日 22:40/ 0 赞/ 205 阅读

相关 JavaScript jQuery隔行换色

<script type="text/javascript"> $(function() { //隔行变色 $("changeColor tr:

梦里梦外;/ 2022年04月03日 05:23/ 0 赞/ 250 阅读

相关 js隔行换色

1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

r囧r小猫/ 2022年03月19日 02:38/ 0 赞/ 239 阅读

相关 css expression 隔行换色

css实现的，用expression但在实际中部建议使用，占用资源而且firefox浏览器不支持 <style> .db tr{ backgr

た入场券/ 2021年11月22日 23:34/ 0 赞/ 298 阅读

相关利用js实现表格隔行换色效果

利用js实现表格隔行换色效果首先我们来看一下实现的效果，如下图所示：思路：确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:...

小灰灰/ 2020年06月03日 12:45/ 0 赞/ 681 阅读