场景

效果

要求

鼠标放在一行上此行背景颜色单倍高亮，点击一行时双倍高亮。

实现

html代码

<div class="ibox-content" id="orderDetailsDiv" th:fragment="orderDetailsDiv"><div class="table-responsive"><button id="printBtn"  class="btn btn-info  mb_1em" type="button" onclick="return printDetails();"><i class="fa fa-print"></i> 打印</button><table id="wmsInOrderDetail_table_id"  class="table  table-bordered hover" style="width:100%"><thead><tr class="text_al_c"><th>序号</th><th>托盘编号</th><th>物料编号</th><th>物料名称</th><th>数量</th><th>供应商批次</th><th>生产日期</th><th>状态</th></tr></thead><tbody ><tr th:each="orderlist:${wmsReceiveOrderDetailsVOList}"  class="text_al_r"><td class="badao_Center"><input type="checkbox"class="ads_Checkbox "th:text="${orderlistStat.index+1}"th:value="${orderlist.id}" name="checkedid"/></td><td th:text="${orderlist.salverCode}"  class="badao_Center"></td><td th:text="${orderlist.materielNumber}"  class="badao_Center"></td><td th:text="${orderlist.materielName}" class="badao_Left"></td><td th:text="${orderlist.num}" class="badao_Right"></td><td th:text="${orderlist.supplierBatch}"  class="badao_Center"></td><td th:text="${#dates.format(orderlist.productDate, 'yyyy-MM-dd')}"  class="badao_Center"></td><td th:text="${orderlist.statusName}"  class="badao_Center"></td></tr></tbody></table></div></div>

css样式代码

.badao_hoverd {background-color: rgba(35,198,200,0.1); } .badao_click {background-color: rgba(35,198,200,0.6); }

jquery代码

$(document).ready(function() {//行点击事件，用来设置样式点击事件$('#wmsInOrderDetail_table_id tbody').on('click', 'tr', function () {if (!$(this).hasClass('badao_click') ) {$(this).removeClass('badao_hoverd');$(this).addClass('badao_click').siblings().removeClass("badao_click");}});// 行悬浮事件，用来设置样式悬浮事件$('#wmsInOrderDetail_table_id tbody').on('mouseover', 'tr', function () {if (!$(this).hasClass('badao_hoverd') ) {$(this).addClass('badao_hoverd');}} ).on('mouseleave', 'tr', function () {if ($(this).hasClass('badao_hoverd') ) {$(this).removeClass('badao_hoverd');}} );});

 

总结

以上是生活随笔为你收集整理的Jquery中设置表格的悬浮和选中时行的背景颜色的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。