复选框选中改变tr整行颜色事件

时间：2025-03-10 09:39:12
 <script type="text/javascript">
        $(function () {
 //input 单击事件
            $("input").click(function () {
                //获取checkbox选中项
                if ($(this).prop("checked") == true) {
                    $(this).parent().parent().css("background", "#b2dba1");
                } else {
                    $(this).parent().parent().css("background", "");
                }
            });
})

<body>
    <table style="text-align: center" class="auto-style1">
        <tr>
            <td>选 择</td>
            <td>姓 名</td>
            <td>性 别</td>
            <td>年 龄</td>
        </tr>
        <tr>
            <td>
                <input  type="checkbox" /></td>
            <td>杨菲</td>
            <td>女</td>
            <td>23</td>
        </tr>
        <tr>
            <td>
                <input  type="checkbox" /></td>
            <td>刘儒龙</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>
                <input  type="checkbox" /></td>
            <td>梁欢</td>
            <td>女</td>
            <td>23</td>
        </tr>
        <tr>
            <td>
                <input  type="checkbox" /></td>
            <td>罗宏祥</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>
                <input  type="checkbox" /></td>
            <td>李清峰</td>
            <td>男</td>
            <td>24</td>
        </tr>
    </table>
</body>

相关文章