[jQuery] table表格

jQuery:

(1) $('th').parent().addClass('table-height');   

     为标题添加样式；

 

(2) $('#striped tbody tr:even').addClass('even');      
     $('#striped tbody tr:odd').addClass('odd');  

     给单行设置even(浅蓝色)；给双行设置odd(浅黄色)。

 

(3) jQuery的连缀

     $('td:contains("Henry")')               //取得包含"Henry"的所有单元格
         .parent()                                                    //取得它的父元素
         .find('td:eq(1)')                           //在父元素中查找第2个单元格
        .addClass('highlight')                   //为该单元格添加"highlight"类
        .end()                              //回复到包含"Henry"的单元格的父元素
        .find('td:eq(2)')                            //在父元素中查找第3个单元格
        .addClass('highlight');                  //为该单元格添加"highlight"类

 

 

css:

Code
<style type="text/css">
.odd{
    background-color:#ffc; 
}
.even{
    background-color:#cef;
}
.highlight{
    font-weight:bold;
    color:#f00;
}
.table-height{
    font-weight:bold;
    color:#369;
}
</style>

 

 

Html:

Code
<table id="striped">
  <thead>
  <tr>
    <th>Title</th>
    <th>Category</th>
    <th>Year Published</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>As You Like It</td>
    <td>Comedy</td>
    <td>&nbsp;</td>
  </tr>
  ……
  <tr>
    <td>Henry V</td>
    <td>History</td>
    <td>1599</td>
  </tr>
  </tbody>
</table>