使用 jQuery 粉飾 table

直接看 DEMO.

我是直接使用 Google 的 jQuery.

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

然後你要定義 table 的 css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<style type="text/css">
    body {
        background: #ffffff;
    }
    table {
        border-collapse: collapse;
        width: 70%;
        font: 12px Verdana, Arial, Helvetica, sans-serif;
        text-align: center;
    }
    th {
        background: #3e83c9;
        color: #ffffff;
        font-weight: bold;
        padding: 2px 11px;
        border-right: 1px solid #ffffff;
    }
    td {
        padding: 6px 11px;
        border-bottom: 1px solid #95bce2;
        vertical-align: top;
    }
    td * {
        padding: 6px 11px;
    }
    tr.alt td {
        background: #ecf6fc;
    }
    tr.over td {
        background: #bcd4ec;
    }
</style>

設定 table 的一些屬性 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<table class="listview" border="0" align="center">
  <thead>
    <tr>
      <th>Name</th>
      <th>Height</th>
      <th>Weight</th>
      <th>Vegetarian</th>
      <th>Taiwanese</th>
      <th>English</th>
      <th>Japanese</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="22%">Sam</td>
      <td width="13%">183 cm</td>
      <td width="13%">82 kg</td>
      <td width="13%">V</td>
      <td width="13%">V</td>
      <td width="13%">V</td>
      <td width="13%">V</td>
    </tr>
  </tbody>
<table>

在用 jquery 加入 css 設定 :

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
  $(document).ready(function() {
    $(".listview tr").mouseover(function() {
        $(this).addClass("over");
      }).mouseout(function() {
        $(this).removeClass("over");
      });
    $(".listview tr:even").addClass("alt");
  });
</script>