1. 程式人生 > >jQuery實現 滑鼠放在table哪一行 哪一行就變色,移開就恢復

jQuery實現 滑鼠放在table哪一行 哪一行就變色,移開就恢復

參考別人寫出的,程式碼如下:

<style type="text/css">
            .bgRed {
                background-color: #b2dba1;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("tr").first().nextAll().mouseover(function() { //獲取標題行以外的所有tr每一個都給個滑鼠懸浮事件


                    $(this).children().addClass("bgRed");    //將懸浮的位置新增css樣式
                })
                $("tr").first().nextAll().mouseleave(function() {//滑鼠移開
                    $(this).children().removeClass("bgRed")
                })

            })
        </script>
    </head>

    <body>
        <table>
            <tr>
                <th><input type="checkbox" id="checkAll"> 序號</th>
                <th>所屬機構</th>
                <th>姓名</th>
                <th>手機號碼</th>
            </tr>
            <tr>
                <td><input type="checkbox" name="_dataCheckBox">1</td>
                <td>山東</td>
                <td>張三</td>
                <td>15689547865</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="_dataCheckBox">1</td>
                <td>山東</td>
                <td>張三</td>
                <td>15689547865</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="_dataCheckBox">1</td>
                <td>山東</td>
                <td>張三</td>
                <td>15689547865</td>
            </tr>
        </table>
    </body>