jQuery_完成表格的隔行换色

POOPE

表格的颜色一样不利于区分，而利用jQuery则可以很方便的进行表格的隔行换色操作，原表如下：

这样看着很不方便，但是隔行换色之后非常便捷清楚。

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>使用jQuery完成表格隔行换色</title>
    <link rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    <script>
      $(function(){
        $("tbody tr:even").addClass("even");//将tbody的每个tr的偶数行添加even的类，添加后相当于每个奇数行都添加<class="even">的代码，偶数行同样
        $("tbody tr:odd").addClass("odd");//even用来选择偶数行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>

css代码如下：

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
  background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
  padding-left:25px;
}
.onSuccess{
  background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
  padding-left:25px;
}
.high{
  color:red;
}
  div,span,p {
  width:140px;
  height:140px;
  margin:5px;
  background:#aaa;
  border:#000 1px solid;
  float:left;
  font-size:17px;
  font-family:Verdana;
  }
  div.mini { 
  width:55px;
  height:55px;
  background-color: #aaa;
  font-size:12px;
  }
  div.hide { 
  display:none;
  }
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;}
.even    { background:#FFF38F;}  /* 偶数行样式*/
.odd    { background:#FFFFEE;}  /* 奇数行样式*/
.selected    { background:#FF6500;color:#fff;}

正是因为有.even和.odd里面的设置，这样才能使用addClass()方法，达到隔行换色的方法。当然也可以不用addClass()方法。

另一种方法的代码：

$(function(){
        
        $("tbody tr:even").css("background-color","yellow");//注意颜色也要用分号引起来
        $("tbody tr:odd").css("background-color","pink");
//         $("tbody tr:even").addClass("even");
//         $("tbody tr:odd").addClass("odd");
        
      })

表的结构不变，用css()方法可以添加属性和属性值。

[jQuery] jQuery_完成表格的隔行换色

相关帖子

怎样将pdf转换成excel表格

pdf怎么转换成excel表格收费吗

如何提取pdf中的文字及表格

pdf表格怎么转换word表格

利用CSS禁止复制网页内容

使用HTML/CSS/JS做一个恋爱计时小挂件

怎么利用配置文件来管理多个 Node.js 进程

常用jquery右健禁止命令

uni-app 利用canvas画简单海报并保存图片

利用html+js触发弹窗事件

POOPE LV4