0
点赞
收藏
分享

微信扫一扫

使用jquery实现如下界面效果(表格,奇偶行颜色不同)

Hyggelook 2022-03-31 阅读 38
jquery

使用jquery实现如下界面
提示:
1、奇数行背景色:#FFF38F;偶数行背景色:#FFFFEE;选中行:#FF6500
2、选中行时,设置单选框选中状态
代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 引入jquery库 -->
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("tbody>tr:odd").addClass("odd");
            $("tbody>tr:even").addClass("even");
            $("tbody>tr").click(function() {
                $(this).addClass("s").siblings().removeClass("s").end().find(":radio").attr("checked", true);
          // sibings : 返回其他同级元素     在这里选中其他行,改变样式为原来的样子
        // end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。
            });
        });
    </script>
    <style>
        .even {
            background-color: #FFF38F;
        }
        
        .odd {
            background-color: #FFFFEE;
        }
        
        .s {
            background-color: #FF6500;
        }
        /* 选中的样式只能放在后面,才能掩盖原来的样式 */
        
        table {
            border: 1px solid black;
            text-align: center;
            border-collapse: collapse;
        }
        
        th,
        td {
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>

<body>
    <table id="tb1">
        <thead>
            <th style="width: 70px;"></th>
            <th style="width: 90px;">姓名</th>
            <th style="width: 90px;">性别</th>
            <th style="width: 200px;">暂住地</th>
        </thead>

        <tbody>
            <tr id="tr1">
                <td><input type="radio"  id="rd"></td>
                <td>张三</td>
                <td></td>
                <td>四川成都</td>
            </tr>
            <tr id="tr2">
                <td><input type="radio"  id="rd"></td>
                <td>李四</td>
                <td></td>
                <td>四川绵阳</td>
            </tr>
            <tr id="tr3">
                <td><input type="radio"  id="rd"></td>
                <td>王五</td>
                <td></td>
                <td>四川南充</td>
            </tr>
            <tr id="tr4">
                <td><input type="radio"  id="rd"></td>
                <td>赵六</td>
                <td></td>
                <td>四川自贡</td>
            </tr>
            <tr id="tr5">
                <td><input type="radio"  id="rd"></td>
                <td>陈勇</td>
                <td></td>
                <td>四川德阳</td>
            </tr>
            <tr id="tr6">
                <td><input type="radio"  id="rd"></td>
                <td>罗梅</td>
                <td></td>
                <td>四川宜宾</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

使用:odd :even 过滤出 偶数行、奇数行
siblings( ) :选中其他同级的元素

举报

相关推荐

0 条评论