第一步:写html代码部分:

<table style="width:300px;">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
</table>

第二步:插入jquery插件:

<script src="js/jquery-3.1.0.min.js"></script>

第三步:写jquery代码:

<script type="text/javascript">
$(document).ready(function(){
$("tr:nth-child(2n+1)").css("background","red");
$("tr:first-child").css("background","blue");
$("tr:last-child").css("background","green");

});
</script>

jquery做表格变色效果-demo的更多相关文章

  1. jQuery 实现表格变色效果

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  2. 如何用Jquery做图片展示效果

    一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...

  3. Jquery表格变色 复选框全选,反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  4. JQuery实现隔行变色和突出显示当前行 效果

    运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...

  5. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  6. 简单的用jQuery做遮罩效果

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. 基于jquery的表格动态创建,自动绑定,自动获取值

    最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...

  8. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  9. jQuery实现模拟滚动条效果;

    滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...

随机推荐

  1. redis笔记

    redis字符串 : 存储基本的一个键值对. redis哈希 : Redis的哈希值是字符串字段和字符串值之间的映射,所以他们是表示对象的完美数据类型. 一个哈希表可以存在多个键值对,可对键值进行增删 ...

  2. php数组合并&去重&恢复索引demo

    <?php $tmp = array('a','b','v'); $tmp_1 = array('a','s','asdf'); $res = array_merge($tmp,$tmp_1); ...

  3. VC 6中配置OpenGL开发环境

    2010,2012中配置类似 http://hi.baidu.com/yanzi52351/item/f9a600dffa4caa4ddcf9be1d VC 6中配置OpenGL开发环境 这里,我习惯 ...

  4. Preference Screen 首选项

     设置Preference Screen (res\xml\userpreferences.xml) <?xml version="1.0" encoding="u ...

  5. 临时存存储页面上的数据---Web存储

    HTML5 Web存储的两种方法使用 localStorage和sessionStorage 参考: http://www.cnblogs.com/taoweiji/archive/2012/12/0 ...

  6. Mongodb基本操作说明

    Mongodb基本操作说明 1.首先cmd(管理员方式运行)下启动mongo服务(类似初始化工具): Mongod.exe 默认文件夹为 :c:\data\db 如果没有创建该文件夹的话,需要先创建该 ...

  7. JAVASE02-Unit05: 集合操作 —— 查找表

    Unit05: 集合操作 -- 查找表 使用该类测试自定义元素的集合排序 package day05; /** * 使用该类测试自定义元素的集合排序 * @author adminitartor * ...

  8. magereverse - Magento数据库表结构

    Magento数据库表结构相当复杂,250多张表包含了非常多的表关联关系,让刚刚接触Magento的开发者来说真的非常头疼.往往是看到一个产品的各种属性分散在非常多的表中,找不到任何办法来取出它们的数 ...

  9. lintcode bugfree and good codestyle note

    2016.12.4, 366 http://www.lintcode.com/en/problem/fibonacci/ 一刷使用递归算法,超时.二刷使用九章算术的算法,就是滚动指针的思路,以前写py ...

  10. JAVA NIO系列(二) Channel解读

    Channel就是一个通道,用于传输数据,两端分别是缓冲区和实体(文件或者套接字),通道的特点(也是NIO的特点):通道中的数据总是要先读到一个缓冲区,或者总是要从一个缓冲区中读入. Channel的 ...