jQuery：1.5.4.1，表格变色（第一行是奇数）

最新推荐文章于 2022-05-17 16:55:35 发布
最新推荐文章于 2022-05-17 16:55:35 发布
阅读量63 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/ylbtech/archive/2013/01/24/2875450.html
版权
ylbtech-jQuery:jQuery学习

jQuery语法实例

表格变色 效果截图  
jQuery：1.5.4.1,表格变色 HTML代码返回顶部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .even{ background-color:Gray;} /*奇数行样式*/
        .odd{ background-color:Yellow;} /*偶数行样式*/
    </style>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("tr:even").addClass("even");  /*给奇数行添加样式*/
            $("tr:odd").addClass("odd");  /*偶数行添加样式*/
        });
    </script>
</head>
<body>
<h3>表格变色</h3>
    <table style="width: 300px;">
        <tr>
            <th>
                
                name</th>
            <th>
                sex</th>
            <th>
                age</th>
        </tr>
        <tr>
            <td>
                rain 
            </td>
            <td>
                male 
            </td>
            <td>
                
                23</td>
        </tr>
        <tr>
            <td>
                rain 
            </td>
            <td>
                male 
            </td>
            <td>
                
                23</td>
        </tr>
        <tr>
            <td>
                rain 
            </td>
            <td>
                male 
            </td>
            <td>
                
                23</td>
        </tr>
        <tr>
            <td>
                rain 
            </td>
            <td>
                male 
            </td>
            <td>
                
                23</td>
        </tr>
        </table>
    <div>注意：$("tr:odd")和$("tr:even")选择器中的索引是从0开始的，因此第一行是奇数</div>
</body>
</html>
jQuery：1.5.4.1.B,效果截图返回顶部

 表格变色

warn作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/ylbtech/archive/2013/01/24/2875450.html

weixin_30632899
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
页面加载完成后，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色
m0_58823793的博客
06-09 742
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title&...
jquery easyui 1.5.4.1
01-02
PowerDesigner15_Evaluation 破解文件，下载到PowerDesigner15安装目录下即可
jQuery入门实操-css操作，鼠标点击事件，页面计算器
Rex__404的博客
11-30 2968
前言 本文是学习jQuery中的一些实践，是jQuery入门的实操案例。更多语法可参考w3school的jQuery参考手册 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Aj
JS.页面中有一个ul列表，共有10个li标签，为每个列表项添加随机的背景色；页面中还有一个按钮，点击按钮，为每一个li更换随机的背景色。
lanseguhui的博客
06-30 4390
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; li{ width: 300px; height: 30px; }
CSS中如何选择ul下li的奇数、偶数行
weixin_30516243的博客
08-07 295
<style> #Ulistli:nth-of-type(odd){margin-left:20px;}奇数行 #Ulistli:nth-of-type(even){margin-left:10px;}偶数行 </style> <ulid="Ulist"> <li>1</li&...
JS页面中有一个ul列表，共有10个li标签，其中奇数项显示背景色红色，偶数项显示背景色黄色。（for,while各自实现一下）
lanseguhui的博客
06-30 3748
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; li{ list-style:none; width: 1
学习jQuery这一篇就够了
热门推荐
轻松的小希
11-25 9万+
目录第一章 jQuery简介1.1、jQuery简介1.2、jQuery官网1.3、jQuery版本介绍1.4、jQuery引入方式1.5、jQuery快速使用1.6、jQuery两把利器第二章 jQuery核心函数2.1、选择器2.1.1、基本选择器2.1.1.1、标签选择器2.1.1.2、id选择器2.1.1.3、class选择器2.1.1.4、通配符选择器2.1.1.5、并集选择器2.1.1.6、交集选择器2.1.2、层级选择器2.1.2.1、子代选择器2.1.2.2、后代选择器2.1.2.3、兄弟选
前端之jQuery基础
weixin_30947043的博客
07-29 110
jQuery简单了解 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb...
3. jQuery从入门到精通
weixin_45210011的博客
05-17 375
根据尚硅谷课程jQuery写的课程笔记
基于JQuery EasyUI 1.5.x的Inspdep主题美化大包设计源码
最新发布
04-08
Inspdep主题美化大包 - 基于JQuery EasyUI 1.5.x构建，包含2332个文件，包括JavaScript、HTML、CSS、PHP和Python等多种语言。该大包旨在为用户提供美观、易用的Web界面，包含丰富的组件和主题，以提高开发效率和用户...
jQuery EasyUI jquery-easyui-1.5.5.6
08-11
1. `jquery.easyui.min.js`：这是jQuery EasyUI的核心库，已经进行了压缩和混淆，以减小文件大小并提高页面加载速度。它包含了一系列的UI组件，如对话框（dialog）、表单（form）、表格（datagrid）、菜单（menu）等...
jQuery-EasyUI 常用UI组件 v1.5.5.4
10-10
jQuery EasyUI 是一个基于 jQuery 的前端框架，它简化了网页开发者构建用户界面的过程。这个框架提供了丰富的组件，使得创建交互式、响应式的Web应用程序变得更加容易。版本 v1.5.5.4 包含了一些核心的UI组件，这些...
jquery-easyui-1.5.5.5 汉化版（2组演示_PC+移动设备 ）
08-06
jQuery EasyUI 1.5.5.5 官方完整程序包（原版）及演示（汉化，在线地址：http://www.ranzhijun.top/?p=438）：（1）电脑版－翻译改编，移动设备兼容处理；（2）移动版－翻译整理。
jquery-easyui-1.5.5.2官网
07-14
**jQuery EasyUI 1.5.5.2 官方文档** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列轻量级、易于使用的组件，帮助开发者快速构建功能丰富的 Web 应用程序。EasyUI 的核心思想是通过简单的 HTML 标签...
jQuery实现选择某一行改变其颜色，取消选择恢复原色
qq_40930491的博客
05-26 5666
要求：使一个 table 隔行变色，选中其中一列的复选框时，该复选框所在行的背景色高亮显示， 取消选中复选框时，所在行的背景色恢复遇到的最大的问题：就是在以上代码中使用了css对表格的背景颜色进行初始化设置，这样无法实现选择checkbox整行改变颜色，效果如下最终实现代码：就是通过表格中的bgcolor属性对表格背景颜色初始化最终实现效果：...
jquery-1.5.min
04-25
jquery-1.5.min.js
jquery-1.5.min.js(整理)
02-25
jquery-1.5.min.js 已整理好的，方便阅读
treetable php,第105款插件：jquery.treetable.js的使用
06-06
jquery.treetable.js 是一款基于 jQuery 的插件，用于快速构建树形结构的表格。它使用简单，功能强大，可以很方便地实现复杂的树形结构展示。 在 PHP 中使用 jquery.treetable.js 也非常简单，只需要在 PHP 页面中引入相关的 JavaScript 文件，然后在 HTML 页面中构建表格，并使用 jQuery.treetable() 方法初始化即可。 以下是一个简单的示例： 1. 引入相关的 JavaScript 文件 ```html <script src="//code.jquery.com/jquery-3.6.0.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.treetable/3.2.0/jquery.treetable.min.js"></script> ``` 2. 构建表格 ```html <table id="mytable"> <thead> <tr> <th>名称</th> <th>描述</th> <th>类型</th> </tr> </thead> <tbody> <tr data-tt-id="1"> <td>节点1</td> <td>描述1</td> <td>类型1</td> </tr> <tr data-tt-id="2" data-tt-parent-id="1"> <td>节点2</td> <td>描述2</td> <td>类型2</td> </tr> <tr data-tt-id="3" data-tt-parent-id="1"> <td>节点3</td> <td>描述3</td> <td>类型3</td> </tr> </tbody> </table> ``` 3. 初始化表格 ```javascript $(function() { $('#mytable').treetable(); }); ``` 这样，就可以在 PHP 页面中使用 jquery.treetable.js 插件了。当然，还有许多高级用法，可以根据具体需求进行扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值