表格布局

<table class="table">
    <thead>
        <tr class="text-center">
            <th>选择</th>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
        </tr>
    </thead>
    <tbody>
        <tr class="text-center">
            <td><input type="checkbox"/></td>
            <td>张山</td>
            <td>男</td>
            <td>浙江宁波</td>
        </tr>
        <tr class="text-center">
            <td><input type="checkbox"/></td>
            <td>李四</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
        <tr class="text-center">
            <td><input type="checkbox"/></td>
            <td>王五</td>
            <td>男</td>
            <td>湖南长沙</td>
        </tr>
        <tr class="text-center">
            <td><input type="checkbox"/></td>
            <td>赵六</td>
            <td>男</td>
            <td>浙江温州</td>
        </tr>
        <tr class="text-center">
            <td><input type="checkbox"/></td>
            <td>赵六</td>
            <td>男</td>
            <td>浙江温州</td>
        </tr>
        <tr class="text-center">
            <td><input type="checkbox"/></td>
            <td>赵六</td>
            <td>男</td>
            <td>浙江温州</td>
        </tr>
    </tbody>
</table>

css清单：

.even{
            background: #fff38f;
        }
        .odd{
            background: #ffffee;
        }
        .table{
            border:1px solid #ccc;
            border-collapse:collapse;
            width:500px;
        }
        .table>thead>tr>th ,.table>tbody>tr>td{
            border:1px solid #ccc;
        }
        tr.text-center>td,tr.text-center>th{
            text-align: center;
        }
        tr.selected{
            background-color: #5eb95e;
        }

表格复选框多选实现一：

 $('tbody>tr').click(function(){
            if($(this).hasClass('selected')){
                $(this).removeClass('selected').find(':checkbox').prop('checked',false);
            }else{
                $(this).addClass('selected').find(':checkbox').prop('checked',true);
            }
        });

表格复选框多选代码简化版：

  $('tbody>tr').click(function(){
            //判断当前是否选中
            var hasSelected = $(this).hasClass('selected');
            $(this)[hasSelected? "removeClass":"addClass"]('selected')
                .find(':checkbox').prop('checked',!hasSelected)

        });

3，插件写法

//编写插件
        (function($){
            $.fn.extend({
                'alterBgColor':function(options){
                    options = $.extend({
                        odd:'odd',
                        even:"even",
                        selected:"selected"
                    },options);

                    $("tbody>tr:odd",this).addClass(options.odd);
                    $("tbody>tr:even",this).addClass(options.even);

                    $('tbody>tr',this).click(function(){
                        var hasSlected = $(this).hasClass(options.selected);
                        $(this)[hasSlected? "removeClass":"addClass"](options.selected)
                     .find(':checkbox').prop('checked',!hasSlected)
                    });
                    $('tbody>tr:has(:checked)',this).addClass(options.selected);

                    return this; //返回this，使方法可链
                }
            });
        })(jQuery);
        //调用
        $('.table').alterBgColor();

补充：复选框单选

  $('tbody>tr').click(function(){
            if($(this).hasClass('selected')){
                $(this).removeClass('selected').find(':checkbox').prop('checked',false);
            }else{
                $(this).addClass('selected').find(':checkbox').prop('checked',true);
                $(this).siblings().removeClass('selected').find(':checkbox').prop('checked',false);
            }
        });