jquery方式的表格效果（隔行变色，单行高亮）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表格</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#ta tr").mouseover(function(){ $(this).addClass("over"); }); $("#ta tr").mouseout(function(){ $(this).removeClass("over"); }); $("#ta tr:even").addClass("double"); }); </script> <style type="text/css">th{background: gray;color: white;}table{width: 30em;height: 10em;}td { border-bottom:1px solid #95bce2; text-align:center;}tr.over td{background: #D6E8F8;font-weight: bold;}tr.double td{background: #DAF3F1;} </style></head><body> <table id="ta" border="0" cellpadding="0" cellspacing="0"> <tr> <th>姓名</th> <th>年龄</th> <th>籍贯</th> <th>手机</th> </tr> <tr> <td>alp</td> <td>zweizig</td> <td>上海</td> <td>13088888888</td> </tr> <tr> <td>alp</td> <td>zweizig</td> <td>上海</td> <td>13088888888</td> </tr> <tr> <td>alp</td> <td>zweizig</td> <td>上海</td> <td>13088888888</td> </tr> <tr> <td>alp</td> <td>zweizig</td> <td>上海</td> <td>13088888888</td> </tr> <tr> <td>alp</td> <td>zweizig</td> <td>上海</td> <td>13088888888</td> </tr> <tr> <td>alp</td> <td>zweizig</td> <td>上海</td> <td>13088888888</td> </tr> <tr> <td>alp</td> <td>zweizig</td> <td>上海</td> <td>13088888888</td> </tr> <tr> <td>alp</td> <td>zweizig</td> <td>上海</td> <td>13088888888</td> </tr> <tr> <td>alp</td> <td>zweizig</td> <td>上海</td> <td>13088888888</td> </tr> </table></body></html>
页:
[1]