使用jquery实现如下界面效果（表格，奇偶行颜色不同）

en桃er好qia

已于 2022-03-31 17:03:30 修改

阅读量3.1k

点赞数 4

文章标签： jquery

于 2022-03-31 16:56:35 首次发布

本文链接：https://blog.youkuaiyun.com/scscdstfxqxxzqqc/article/details/123877352

版权

本文介绍如何使用jQuery为表格中的奇偶行设置不同的背景色，并在选中行时切换单选框状态。通过`:odd`和`:even`选择器，以及`siblings()`方法来实现实时样式切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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>
		<!-- 把表格放在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( ) ：选中其他同级的元素