4.JavaScript实现表格隔行变色

﹏ヽ暗。殇╰゛Y 2022-12-12 04:38 181阅读 0赞

css代码如下：

<style> *{             
     margin: 0;           
      padding: 0;        
      }        
      table{            
      width: 80%;            
     text-align: center;           
      margin: 50px auto;           
      border: 1px solid black;            
      border-collapse: collapse;           
          /* 合并边框 没有空隙 */       
        }       
         th,td{            
      order: 1px solid black;            
        padding: 15px;       
           }       
         td{             
         font-size: 18px;        
         }        
        .odd{            
         background-color: rgb(253, 197, 206);        
        }        
       .even{             
        background-color: rgb(172, 250, 152);       
           }  
             </style>~

html代码如下

<table>        
    <thead>           
     <tr>                
     <th>编号</th>               
      <th>姓名</th>                
      <th>出生日期</th>           
       </tr>        
       </thead>        
       <tbody>            
       <tr>                
       <td>01</td>                
       <td>张</td>                
    <td>2001.06.10</td>           
     </tr>           
      <tr>                
      <td>02</td>                
      <td>张</td>               
       <td>2001.06.10</td>           
        </tr>~
       </tbody>    
       </table>~

js代码如下：

<script>        
    var trs = document.querySelectorAll('tbody tr')        console.log(trs)        
    for(var i=0;i<trs.length;i++){             
    if(i%2==0){                
     trs[i].className='odd'            
     }else{                 
     trs[i].className='even'            
     }             
     // 为tr注册 onmouseover事件（鼠标进入） 
     trs[i].onmouseover=function(){                  
     this.style.backgroundColor='#eee'             
     }              
    // 为 tr 注册 onmouseout 事件(鼠标离开) 
    trs[i].onmouseout=function(){                   
    this.style.backgroundColor=''             
     }        
     }   
      </script>~

发表评论取消回复

表情：

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

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

相关阅读

相关使用CSS3实现表格隔行/隔列变色

话少说，先看效果，如果不是你想要的，你可以撤了~ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_...

冷不防/ 2024年04月19日 15:11/ 0 赞/ 75 阅读

相关 onmouseover+onmouseout ：表格隔行变色

表格隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset

灰太狼/ 2023年10月03日 14:50/ 0 赞/ 29 阅读

相关 table表格，隔行，格列变色

隔行变色每隔奇数行变色一次 tr:nth-child(odd) { background-color: eee; } ![在这里插

﹏ヽ暗。殇╰゛Y/ 2023年01月19日 03:11/ 0 赞/ 28 阅读

相关 4.JavaScript实现表格隔行变色

css代码如下： <style> { margin: 0; padding: 0;

﹏ヽ暗。殇╰゛Y/ 2022年12月12日 04:38/ 0 赞/ 182 阅读

相关 jquery实现隔行变色

原生js var tab = document.getElementByTagName('table')[0]; var tr = tab.getElemen

青旅半醒/ 2022年08月12日 05:58/ 0 赞/ 227 阅读

相关 js 实现隔行变色

![效果图][SouthEast] -------------------- <!DOCTYPE html> <html lang="en"> <h

向右看齐/ 2022年06月17日 23:08/ 0 赞/ 213 阅读

相关 JavaScript-运算符（%）隔行变色

JavaScript\-运算符（%）\隔行变色\ 用到的知识点： %取模。感谢智能社。全部代码如下： ![这里写图片描述][SouthEast] !

古城微笑少年丶/ 2022年06月11日 06:53/ 0 赞/ 226 阅读

相关隔行变色jquery 实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

拼搏现实的明天。/ 2022年06月06日 01:18/ 0 赞/ 258 阅读

相关 jquery表格隔行变色

结果如下图: ![这里写图片描述][70] <!doctype html> <html> <head> <meta http-eq

客官°小女子只卖身不卖艺/ 2022年05月21日 02:38/ 0 赞/ 253 阅读

相关 jQuery表格之隔行变色

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

清疚/ 2021年12月10日 00:49/ 0 赞/ 348 阅读