页面中的HTML代码如下:
<table width="383" height="257" border="1" align="center">
  <tr>
    <td width="121"><div align="center">学号</div></td>
    <td width="171"><div align="center">姓名</div></td>
    <td width="139"><div align="center">专业</div></td>
  </tr>
  <tr>
    <td><div align="center">01dd0101</div></td>
    <td><div align="center">小陈</div></td>
    <td><div align="center">小学教育</div></td>
  </tr>
  <tr>
    <td><div align="center">01d0505</div></td>
    <td><div align="center">小王</div></td>
    <td><div align="center">计算机</div></td>
  </tr>
  <tr>
    <td><div align="center">01d0205</div></td>
    <td><div align="center">小刘</div></td>
    <td><div align="center">高数</div></td>
  </tr>
</table>
应用jQuery技术,实现表格的隔行变色,即表格中奇数行是一种颜色,偶数行是一种颜色
求个大佬,有代码那种

解决方案 »

  1.   

    jquery
    $('tr:eq(odd)').css('backgroundColor': red)css也可以控制隔行变色 
    tr:nth-of-type(odd){
      background-color: red;
    }
      

  2.   

    大佬能不能直接把全部代码发出来侮辱我上面jquery写错了,以下是可实现代码,style里面也可以直接用样式,改下自己的jquery引用路径,给分吧.<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <!-- <style>
        tr:nth-of-type(even){
          background-color: pink;
        }
      </style> -->
      <script src="./jquery.min.js"></script>
      <script>
        $(function(){
          $('table tr:odd').css('background', 'pink')
        })
      </script>
    </head>
    <body>
      <table width="383" height="257" border="1" align="center">
      <tr>
        <td width="121"><div align="center">学号</div></td>
        <td width="171"><div align="center">姓名</div></td>
        <td width="139"><div align="center">专业</div></td>
      </tr>
      <tr>
        <td><div align="center">01dd0101</div></td>
        <td><div align="center">小陈</div></td>
        <td><div align="center">小学教育</div></td>
      </tr>
      <tr>
        <td><div align="center">01d0505</div></td>
        <td><div align="center">小王</div></td>
        <td><div align="center">计算机</div></td>
      </tr>
      <tr>
        <td><div align="center">01d0205</div></td>
        <td><div align="center">小刘</div></td>
        <td><div align="center">高数</div></td>
      </tr>
    </table>
    </body>
    </html>
      

  3.   

    那个大佬!为什么这部分是灰的啊!  <!-- <style>
        tr:nth-of-type(even){
          background-color: pink;
        }
      </style> -->
      

  4.   

    大佬能不能直接把全部代码发出来侮辱我上面jquery写错了,以下是可实现代码,style里面也可以直接用样式,改下自己的jquery引用路径,给分吧.<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <!-- <style>
        tr:nth-of-type(even){
          background-color: pink;
        }
      </style> -->
      <script src="./jquery.min.js"></script>
      <script>
        $(function(){
          $('table tr:odd').css('background', 'pink')
        })
      </script>
    </head>
    <body>
      <table width="383" height="257" border="1" align="center">
      <tr>
        <td width="121"><div align="center">学号</div></td>
        <td width="171"><div align="center">姓名</div></td>
        <td width="139"><div align="center">专业</div></td>
      </tr>
      <tr>
        <td><div align="center">01dd0101</div></td>
        <td><div align="center">小陈</div></td>
        <td><div align="center">小学教育</div></td>
      </tr>
      <tr>
        <td><div align="center">01d0505</div></td>
        <td><div align="center">小王</div></td>
        <td><div align="center">计算机</div></td>
      </tr>
      <tr>
        <td><div align="center">01d0205</div></td>
        <td><div align="center">小刘</div></td>
        <td><div align="center">高数</div></td>
      </tr>
    </table>
    </body>
    </html>
    顺便一问,咋给分啊
      

  5.   

    灰色的是CSS部分,你可以自己选择用CSS去隔行变色还是jquery