表格变色（单击行，把当行的单选按钮(radio)设为选中状态，并应用当前样式）

需求：单击行，自动选中当前行中的单选框按钮。

html页面：

[html]  view plain copy

1. <table id="tbList" class="table footable" data-sort="false">
       <thead>
       <tr class="primary">
           <th>类型</th>
           <th>商品显示名称</th>
           <th>商品编码</th>
           <th>规格</th>
           <th>生产厂商</th>
           <th>限购个数</th>
           <th>原价</th>
           <th>优惠价</th>
           <th>特价</th>
           <th>所属药店</th>
           <th>选择</th>
           <th>操作</th>
           <th class="hidden">特价ID</th>
       </tr>
       </thead>
   
       <tbody id="tabproInfo"></tbody>
       <script id="tmidtabproduct" type="text/x-jsrender">
       {{for thproductlist}}
       <tr id="tabpro" >
           <td><lable id="idtabtype">{{tabTypeText:tabtype}}</lable></td>
           <td><lable id="iddispname">{{>dispName}}</lable></td>
           <td><lable id="idproductCode">{{>productCode}}</lable></td>
           <td><lable id="idspec">{{>spec}}</lable></td>
           <td><lable id="idmanufactor">{{>manufactor}}</lable></td>
           <td><lable id="idintb">{{>intb}}</lable></td>
           <td><lable id="idprice">{{>price}}</lable></td>
           <td><lable id="idyhprice">{{>yhprice}}</lable></td>
           <td><lable id="idthprice">{{>thprice}}</lable></td>
           <td><lable id="idsupplierName">{{>supplierName}}</lable></td>
            <td>
             <div class="col-xs-3" >
                   <input type="radio" id="idradio" name="radiobutton"  value="{{>idproductTab}}">
            </div>
           </td>
           <td><a href="#" onClick="deletetabpro2()">删除</a>
              <a href="#"  onClick="modifytabpro2()">修改</a>
           </td>
           <td class="hidden"><lable id="ididproductTab">{{>idproductTab}}</lable></td>
       </tr>
       {{/for}}
       </script>
   </table>

js代码：

[javascript]  view plain copy

1. /**表格行背景色
    * */
   function tablerowcolor() {
       //$("tbody>tr:even").addClass("even");  /*给奇数行添加样式*/
       //$("tbody>tr:odd").addClass("odd");  /*偶数行添加样式*/
       //
       ///*当单击表格行时，把当前设为选中状态样式
       // ，并把单选按钮设为选中状态*/
       // $("tbody>tr").click(function () {
       //$(this).addClass('selected')
       //    .siblings().removeClass('selected')
       //    .end()
       //    .find(":radio").attr("checked", true);
       //});
       $("#tbList tr:odd").addClass("odd");// 偶数行样式
       $("#tbList tr:even").addClass("even"); //奇数行样式
   
       $("#tbList tr").hover(function () {
               $(this).addClass('selected');
           },
           function () {
               $(this).removeClass('selected');
           }).click(
           function (e) {
               if ($(e.srcElement || e.target).attr("type") != "radio") {
                   $(this).find(":radio").click(); //$(this).find(":radio").attr("checked", true);有问题
               }
           });
       //$("#tbList input[type='radio']").click(function () {
       //    $(this).parent().parent().addClass('clickCss')
       //        .siblings().removeClass('clickCss')
       //        .end();
       //});
   
   }

   
   

css样式：

[css]  view plain copy

1. .even
   {
       background-color: White;
   }
   /*奇数行样式*/
   .odd
   {
       background-color: Silver;
   }
   /*偶数行样式*/
   .selected
   {
       background-color: Yellow;
   }
   .divboder{
       border:1px solid #96c2f1;background:#eff7ff
   }
   .altCss{
       background:#fff;  /*这行将给所有的tr加上背景色*/
   }
   .overCss{
       background-color:#FEF2E8;  /* #EEF2FB这个将是鼠标高亮行的背景色*/
   }
   .clickCss{background-color:#A7CDF0;} /*3385ff*/