需求:单击行,自动选中当前行中的单选框按钮。
html页面:
js代码:
css样式:
html页面:
-
<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>
-
/**表格行背景色 * */ 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(); //}); }
-
.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*/