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

已于 2022-03-31 17:03:30 修改
阅读量2.9k 收藏 17
点赞数 4
文章标签： jquery
于 2022-03-31 16:56:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/scscdstfxqxxzqqc/article/details/123877352
版权

使用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( ) ：选中其他同级的元素

蓝蓝真**的又强又帅
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery 实现表格奇数偶数行颜色不一样 ，可以实现不同的效果，区分奇数偶数行
pf1234321的专栏
10-04 5635
New Document             /*   window.onload = function()   {     var myTable = document.getElementById("table1");     var myTBody = myTable.getElementsByTagName("tbody")[0];    
JQuery来控制表格奇偶行的不同背景颜色显示
lishirong_李世荣的专栏
12-02 3344
概述：JQuery通过操作DOM来控制页面的显示。来看代码：       jQuery使不同行变不同的颜色    -->     .odd{background-color:#FFCCFF;} .even{ background-color:#CCFFFF;} .highlight{background-color:00FF00;}        $(document).ready(functi
jQuery隔行换色
ahao4311的博客
02-20 272
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-2.1.0.min.js"></s...
jquery怎么设置表格奇偶行不同的颜色？
qq_45991812的博客
06-22 1479
在jQuery中使用“$("tr:odd").css("background-color","颜色")”与“$("#tr:even").css("background-color","颜色")”即可设置表格奇偶行颜色不同。
15款提高表格操作的jQuery插件
哲
12-21 985
table表格由于它的浏览器兼容性和复杂的标签嵌套方式，可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuer
JQuery1.4实现表格样式美化
Java 敏捷设计の哲学
06-12 3177
<br />主要是通过使用JQuery实现表格的简单隔行变色效果！<br /><mce:style type="text/css"><!-- tr{ height: 30px; font-size: 14px; } TH{ background: olive; } .dan{ background: #ddffff; } .shuang{ background: #DEEFDD; } .over{ background: white; } --></mce:st
jquery 制作的表格效果
weixin_30932215的博客
03-31 243
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &l...
jQuery 案例，表格偶数行背景灰色，鼠标划入背景颜色加深，划入奇数列有过渡出现其他颜色
责任与担当
06-25 1054
$("tr").each(function(index,item){ //遍历tr if(index%2===0){ //下标除去2，判断偶数，0/2=0,2/2=0 $(item).css("backgroundColor","rgba(0,0,0,0.1)").hover(function(){ //这个是hover进入函数，这...
jQuery实现表格奇偶行显示不同背景色 就这么简单
01-21
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。 代码如下所示： <html> <style type=text/...
表格奇偶行设置不同颜色的核心JS代码
10-26
表格奇偶行设置不同颜色，在某些情况下还是比较实用的，下面有个不错的示例，大家可以参考下，希望对大家有所帮助
jquery css 设置table的奇偶行背景色示例
12-09
代码如下: <style> .even{background:#FFF38F;} .odd{background:#FFFFEE;} .selected{background:#FF9900;} </style> 代码如下: [removed] $(function(){ $(“tr:odd”).addClass(“odd”); $(“tr:even”).addClass(“even”); }); [removed]
如何用jquery控制表格奇偶行及活动行颜色
01-19
最近用到表格奇偶行不同色，不得不去再看jquery，虽然感觉还是难，但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了，不用自己再写一大堆javascript函数去实现了，简单几句轻松搞定。 先定义...
jQuery:表格的奇偶行变色，jquery实例之表格隔一行
weixin_67271870的博客
11-09 547
姓名年龄王华18刘云19刘亮15叶子17刘梦20
jquery 控制表格或者列表 偶数行的颜色
weixin_30695195的博客
06-17 145
demo7:table滑过变色,隔行变色. $(document).ready(function(){ //这个就是传说的ready $(".stripe tr").mouseover(function(){ //如果鼠标移到class为stripe的表格的tr上时，执行函数 $(this).addClass("over");}).mouseout(function(){ ...
web前端实验四
Alfafar的博客
04-26 1716
1.使用jquery实现如下界面效果： 提示： ~奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500 ~选中行时，设置单选框选中状态 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"> </script> &
JQuery实现表格奇偶数行变色
Jyannic的博客
09-11 4164
HTML代码部分start 表格奇偶数行变色     姓名 工资 入职时间 操作 Tom $3500 2010-12-25 删除 Mary $3400 2010-12-01 删除 King $5900 2009-8-17 删除 Scott $3800 2012-11-17 删除
html 奇偶行 变色,利用JQuery和JS实现奇偶行背景颜色自定义效果
weixin_35816805的博客
06-28 648
JQuery实现:/p>"http://www.w3.org/TR/html4/loose.dtd">New Web Project$(function(){//可以是:$('#t1 tbody tr:even').css('background','red');$('#t1 > tbody tr:even').css('background','red');$('#t1 &gt...
Day7—奇偶数列背景颜色设置
qq_45313388的博客
06-09 491
要求： 页面加载完成后，将奇数列的背景色设置为红色，偶数列背景色设置为绿色 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
使用jquery实现图片轮播效果
最新发布
04-05
以下是一个简单的使用jquery实现图片轮播效果的例子： HTML代码： ```html <div class="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> ``` CSS代码： ```css .slider { position: relative; width: 500px; height: 300px; overflow: hidden; } .slider img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slider img.active { opacity: 1; } ``` jQuery代码： ```javascript $(document).ready(function() { // 默认显示第一张图片 $('.slider img:first').addClass('active'); // 自动轮播 setInterval(function() { var $active = $('.slider img.active'); var $next = $active.next(); if (!$next.length) { $next = $('.slider img:first'); } $active.removeClass('active'); $next.addClass('active'); }, 2000); }); ``` 解释： 首先，我们将所有图片放在一个 div 容器中，并设置容器的宽度和高度。然后，我们使用 CSS 将所有图片设置为绝对定位，并设置它们的透明度为 0。在当前活动的图片上添加一个“active”类，以便我们可以在 jQuery 中轻松地找到它。 在 jQuery 中，我们为轮播设置了一个定时器，每隔 2 秒钟就会执行一次。在每次执行时，我们找到当前活动的图片并将其“active”类删除。然后，我们找到下一张图片并将其添加到“active”类中。如果我们到达了最后一张图片，我们将下一张图片设置为第一张图片。 最后，我们在文档准备就绪时设置第一张图片为活动图片，并开始自动轮播。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值