<head>

<style type="text/css">

.even {
    　　　　background-color: #fff38f;/*偶数行样式*/
　　　}
.odd {
   　　　　 background-color: #dcdcdc;/*奇数行样式*/
　　　}
.selected {
   　　　　　 background-color: #ff4136;
　　　　}
table{
    width: 50%;
}

</style>
<script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>/*导入jquery包*/

<script type="text/javascript">

$(function() {
            $("tbody>tr:odd").addClass("odd");//给奇数行添加样式
            $("tbody>tr:even").addClass("even");//给偶数行添加样式
            
            $("tbody>tr").click(function(){//绑定事件
                if(!$(this).hasClass('selected')){//判断本行是否被选中
                    $(this).addClass('selected').find("input").attr("checked",true);//添加selected样式，然后找到多选框，把它的checked属性改为true
                }else{
                    $(this).removeClass('selected').find("input").attr("checked",false);//同上相反
                }
            });
        });

</script>

</head>

<body>
    <table>
        <thead>
            <tr><td></td><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr><td><input type="checkbox"/></td><td>张三</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td><input type="checkbox"/></td><td>李四</td><td>女</td><td>浙江杭州</td></tr>
            <tr><td><input type="checkbox"/></td><td>王五</td><td>男</td><td>湖南长沙</td></tr>
            <tr><td><input type="checkbox"/></td><td>赵六</td><td>男</td><td>浙江温州</td></tr>
            <tr><td><input type="checkbox"/></td><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td><input type="checkbox"/></td><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
        </tbody>
    </table>
  </body>

效果图：

　　

　　

jQuery对表单、表格的操作及更多应用的更多相关文章

  1. jQurey对表单表格的操作及更多应用（方法型）

  2. jQuery（6）——jQuery对表单、表格的操作及更多应用

    jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...

  3. jQuery 对表单、表格的操作及更多应用-简略笔记

    [jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...

  4. （十）jQuery对表单、表格的操作

    一.表单应用 1.HTML中的表单大致由三部分组成 (1).表单标签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...

  5. 第5章 jQuery对表单、表格的操作及更多应用

    本章主要是对前面4章的小结和应用. 一. 表单form应用 表单分为3个组成部分 (1)form标签 表单可包含文本域,复选框,单选按钮等等.表单用于向指定的 URL 传递用户数据. (2)表单域 - ...

  6. jQuery对表单、表格的操作以及更多应用

    表单和表格都是HTML的重要组成部分,分别用于采集.提交用户输入的信息和显示列表数据. 表单应用:一个表单有3个基本组成部分: ①表单标签:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器 ...

  7. jQuery对表单、表格的操作及更多应用（上：表单应用）

    内容摘录自锋利的JQuery一书 一.表单应用 1 获取和失去焦点改变样式(P142) $(function(){ $(":input").focus(function(){ // ...

  8. jQuery对表单、表格的操作及更多应用（中：表格应用）

    内容摘录自锋利的JQuery一书 二.表格应用 1 表格隔行变色(:odd和:even选择器 P157) $(function(){ $("tr:odd").addClass(&q ...

  9. jQuery对表单、表格的操作及更多应用（下：其他应用）

    内容摘录自锋利的JQuery一书 三.其他应用  1 网页字体大小控制(P164) <span class="bigger">放大</span> <s ...

随机推荐

  1. C++构造函数和析构函数

    构造函数简介 在上一个章节我们在创建好类的对象之后,首先对它的每一个成员属性赋值之后再对它们进行输出操作,如果不赋值就输出,这些值就会是垃圾值.而为了代码的简介,一次性为所有成员属性初始化,C++的类 ...

  2. SSRS 报表点击 Preview 显示失败

    今天使用Remote Desktop 链接到Remote Server,在SSDT中创建一个RDL文件,点击PreView预览时,出现以下错误信息 查看details information ==== ...

  3. MVC5 网站开发实践 2、后台管理

    目录 MVC5 网站开发实践 概述 MVC5 网站开发实践 1.建立项目   从这一部分开始做后台管理,首先是基本框架的 一.Data项目 1.项目添加EntityFramework引用 在Data项 ...

  4. DOM扩展-Selectors API(选择符 API)、元素遍历

    DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

  5. 基于讯飞语音API应用开发之——离线词典构建

    最近实习在做一个跟语音相关的项目,就在度娘上搜索了很多关于语音的API,顺藤摸瓜找到了科大讯飞,虽然度娘自家也有语音识别.语义理解这块,但感觉应该不是很好用,毕竟之前用过百度地图的API,有问题也找不 ...

  6. （转）运维角度浅谈MySQL数据库优化

    转自:http://lizhenliang.blog.51cto.com/7876557/1657465 一个成熟的数据库架构并不是一开始设计就具备高可用.高伸缩等特性的,它是随着用户量的增加,基础架 ...

  7. EF7 - What Does “Code First Only” Really Mean

    这篇文章很有价值,但翻译了一段,实在翻译不下去了,没办法,只能转载了. 英文地址:http://blogs.msdn.com/b/adonet/archive/2014/10/21/ef7-what- ...

  8. .NET 中Barcode Library的应用二

    .NET中Barcode Library的应用二 介绍 在上一篇中我已经简单介绍了这个函数库(条形码应用之一------------函数库的简介).在这一篇中我将使用这个库提供更多的操作,希望对大家有 ...

  9. 相克军_Oracle体系_随堂笔记002-基础

    1.常见的Oracle生产库环境: 图2-1可以说是标准的生产库环境,处处体现了冗余,有效防止了单点故障.这就是HA(高可用) 而且冗在某种条件下还可以去掉,平常实现同时运行提供服务,如果一台坏掉,另 ...

  10. Android中Application的应用

    当android程序启动时系统会创建一个 application对象,用来存储系统的一些信息.通常我们是不需要指定一个Application的,这时系统会自动帮我们创建,如果需要创建自己 的Appli ...