場景

效果

要求

鼠標放在一行上此行背景顏色單倍高亮，點擊一行時雙倍高亮。

實現

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中设置表格的悬浮和选中时行的背景颜色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。