jquery--实现简单的各行换色及选择行数换色

最新推荐文章于 2019-10-27 14:22:47 发布
最新推荐文章于 2019-10-27 14:22:47 发布
阅读量390 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxinqiang1129/article/details/8308659
版权
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jqury基础1</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<style type="text/css">
    .rowcolor{background-color:red}
</style>
</head>
<body>
<table id="addcolor" width="20%" border="1" align="center" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td width="10%">1</td>
            <td width="45%">&nbsp;</td>
            <td width="45%">&nbsp;</td>
          </tr>
          <tr>
            <td>2</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>3</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>4</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>5</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>6</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>7</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>8</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>9</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>10</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
    </tbody>
</table>
</body>
</html>
<script>
    $(function(){
        $("#addcolor tr:nth-child(2n+3)").addClass("rowcolor"); //匹配其父元素下的第N个子或奇偶元素（图1）
        //$("#addcolor tr:even").addClass("rowcolor");   //匹配所有索引值为偶数的元素，从 0 开始计数（图2）
    });

</script>

图1：

图2




wangxinqiang1129
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现隔行换色
Those who achieve great thing do not stick to trifles
01-31 555
jQuery实现隔行换色 一、步骤分析 1、设计页面 2、通过JQ方式获取标签 3、使用选择器进行奇偶数的选择“标签:odd”偶数。"标签:even"奇数。gt（x）大于X 二、实现代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隔行换色&lt...
jquery 实现各行换颜色
longyuan20102011的专栏
08-01 765
$(document).ready(function(){ $("tr:even").css("background-color","#B2E0FF"); }); Welcome to My Web Page Id LastName FirstName Address City 1 Adams John Oxford Street London 2
用JQuery实现表格隔行换颜色
nature_fly088的专栏
10-19 1490
最近在学习Jquery，其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的，相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种： 方法一：使用CSS样式，定义两个类的样式，分别使用到表格中。这种方法想法简单，相信很多人都想到。但是这样做很麻烦，如果表格很多工作量就很大。这种方法也是局限在静态添加。如果要用到动态添加数据，相信大家就可以想像到。。。。 方法二：使用javascript，就
jQuery隔行变色
T_Prometheus的博客
09-17 3717
  &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;/head&gt; &lt;script type=&quot
简单的隔行换色 jq
WEB木易
11-07 558
随手写的大家多包涵 简单的隔行换色 页面 html Title .box{ width: 100px; margin: 0 auto; } .box p{ text-align: center; line-height: 14px; } 1 2
jQuery表格行换色的三种实现方法
10-28
一般情况下使用第二种方法是可以的，但是遇到表格行可以拖拽的情况，那么就会出现BUG了，这个自行测试就知道了。
jQuery方法简洁实现隔行换色及toggleClass的使用
10-27
在本例中，我们将详细探讨如何使用 jQuery 的 `toggleClass()` 实现隔行换色，并了解这一方法的工作原理。 首先，我们来看一下基本的 HTML 结构，这里有一个包含多行数据的表格： ```html <!-- 多行数据 --> ...
jquery-3.6.3相关及js文件
01-30
一共包括1、jquery-3.6.3.js文件。 2、jquery-3.6.3.min.js文件。3、jquery-migrate-3.4.0.js文件（主要用于解决jquery版本升级中的问题，是jquery版本升级所必须引用的文件）。4、jquery-migrate-3.4.0.min.js...
jquery-migrate
03-05
例如jQuery版本用的是1.x，计划升级到3.x，就可以在页面删除1.x版本，换成3.x版本，如果有脚本错误，就引入jquery-migrate插件用于兼容低版本，同时也显示低版本方法替换成新版本方法的方案。 jQuery migrate（转移...
jquery-ui.css、jquery-ui.js下载
11-05
例如，要创建一个对话框，只需简单调用`.dialog()`方法，jQuery UI会自动处理剩下的布局、事件绑定和动画效果。 jQuery UI的组件丰富多样，例如： 1. **Dialogs** - 提供模态和非模态对话框，用于展示信息、警告或...
使用jQuery完成隔行换色
03-09 191
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <link rel="stylesheet" href="../css/style.css" ...
JS实现点击选中，换色。
猴子年华的专栏
03-20 944
JS实现点击选中，换色。
纯js实现隔行换色实例
蒗若晨曦
03-15 993
<?php 隔行换色 document.write(''); var i=0; while (i<100) { if (i%10==0) {//打印表格 if(i%20) //定义隔行换色的颜色 bg="#cccccc"; else bg="
jquery实现选中其中一列的复选框时，该复选框所在行的背景色高亮显示（黄色）
G18239715095的博客
10-27 405
先来效果图 代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="Js/jquery.js"></script> <style ...
【jqGrid】jqGrid设置指定行的颜色
热门推荐
Java兔的博客
03-01 1万+
效果： 在页面中新建样式： &lt;style&gt; .differentFlag { color:#FF0000 ; } &lt;/style&gt; 在js中添加样式： gridComplete:function(){ //如果是报表统计页面 if(tableId == "#report_grid_table"){ //获取...
使用jQuery实现表单隔行换色
聆听
01-11 5229
jQuery的基本过滤选择器： odd：匹配所有索引值为奇数的元素，从0开始计数 even：匹配所有索引值为偶数的元素，从0开始计数 我们用到了jQuery所有需要jQuery的js <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="U...
前端简单入门第十八讲 使用jQuery实现表格的隔行换色
李阿昀的博客
05-10 7800
还记得之前我使用JavaScript来实现表格的隔行换色效果吗？如果读者初次翻阅本文，可记得看看教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色！现在我就来使用jQuery完成对数据表格进行隔行换色的显示效果，显示效果为： 要实现该效果，必然要了解以下两个知识点： jQuery的基本过滤选择器： :odd：匹配所有索引值为奇数的元素，从0开始计
jQuery实现隔行变色
席伟娜的专栏
03-19 1万+
//实现table隔行变色超级简单的代码 .one{ background:#C00; } .two{ background:#09F; } $(document).ready(function(){ $("tr:even").addClass("one");//奇数行 $("tr:odd").addClass("two");//偶数行 }
jQuery----五星好评实现
最新发布
05-23
以下是一个简单的 jQuery 五星好评实现： HTML 代码： ```html <span class="star" data-value="1">★ <span class="star" data-value="2">★ <span class="star" data-value="3">★ ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值