使用 jQuery 粉飾 table

1

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

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

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>

<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>

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>

<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>

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>

<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>