<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>test</title>
<!--<link type="text/css" rel="stylesheet" href="css/head.css" />-->
<style type="text/css">
    table {
        border:1px solid #555;
        width:300px;
          
    }
    th {
        border-bottom:2px solid #111;
    }
    tr {
        text-align:center;
    }
    .even {
        aaa;
     }
    .odd {
        background:#ccc;
    }
    .selected {
        pink;
     }
    .left {
        text-align:left;
    }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <caption>个人信息表</caption>
        <thead><tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
        <tbody>
            <tr><td class="left"><input type="checkbox" name="radio" checked="checked" /></td><td>张三</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td class="left"><input type="checkbox" name="radio" /></td><td>李四</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td class="left"><input type="checkbox" name="radio" /></td><td>王五</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td class="left"><input type="checkbox" name="radio" /></td><td>赵六</td><td>男</td><td>浙江温州</td></tr>
            <tr><td class="left"><input type="checkbox" name="radio" /></td><td>七七</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td class="left"><input type="checkbox" name="radio" /></td><td>八八</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td class="left"><input type="checkbox" name="radio" /></td><td>九九</td><td>男</td><td>浙江宁波</td></tr>
        </tbody>
    </table>
    <script type="text/javascript">
        $(function(){
            $('tbody>tr:even').addClass('even');
            $('tbody>tr:odd').addClass('odd');
            $('tbody :checkbox:checked').parents('tr').addClass('selected');
            $('tbody>tr').click(function(){
                var hasselected = $(this).hasClass('selected');
                $(this)[hasselected? "removeClass" : "addClass"]('selected');
                    $(this).find(':checkbox').attr('checked',!hasselected);
            });
        })
    </script>
</body>
</html>