Jquery中设置表格的悬浮和选中时行的背景颜色

比眉伴天荒 2023-10-18 20:51 8阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![20190702094055664.gif][]

### 要求 ###

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

## 实现 ##

### 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');
            }
        } );
     });

[Image 1]: 
[20190702094055664.gif]: https://img-blog.csdnimg.cn/20190702094055664.gif