<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. dev c++ Boost库的安装

    dev c++ 的boost库的安装步骤 然后点击“check for updates”按钮 最后点击“Download selected”按钮,下载完成后安装.... 给dev添加boost库文件, ...

  2. tn文本分析语言(二) 基本语法

    tn是desert和tan共同开发的一种用于匹配,转写和抽取文本的语言.解释器使用Python实现,代码不超过1000行. 本文主要介绍tn的基本语法.高级内容可以参考其他篇章.使用这样的语法,是为了 ...

  3. .Net处理Oracle中Clob类型字段总结

    最近在做项目中用到Clob这个字段,Clob是存储无限长字符的Oracle字段,用的时候网上找资料找了好久,内容不是很多,大部分都不能用,当然也有可以用的,测试了不同版本,整理了一下,给大家在做项目的 ...

  4. T-Sql（八）字段索引和数据加密

    t-sql的基本用法讲到第八章也差不多了,最后就讲下字段索引和数据加密,这两个内容对编程人员可能用的地方不是太多,还是那句老话“防患于未然”. 下面我就简单的说下字段索引和数据加密的内容,只是简单概述 ...

  5. 正则匹配抓取input 隐藏输入项和 <td>标签内的内容

    这里不多作解释了,只要提供方法,如果想了解正则匹配,就去百度. 第一条是,匹配出所有的隐藏输入域 $patern = "/<input(.*?)type=\"hidden\& ...

  6. 浅谈 php 采用curl 函数库获取网页 cookie 和 带着cookie去访问 网页的方法！！！！

    由于近段时间帮朋友开发一个能够查询正方教务系统的微信公众平台号.有所收获.这里总结下个人经验. 开讲前,先吐槽一下新浪云服务器,一个程序里的   同一个函数  在PC测试可以正常运行,在它那里就会挂的 ...

  7. 由一个DAOHelper类引发的思考

    这是一篇发牢骚的文章,可以这么说吧.DAOHelper究竟有什么用呢?用我自己的话去理解,DAOHelper的存在正是敏捷开发的产物,即快速开发. 我们究竟能从项目中学到什么呢?有的人可能会说,从一个 ...

  8. Node.js Express 路由文件分类

    前言 基于上一篇Web Api Controller分类,在MVC中我们通常要按自己的业务来划分Controller层, 好处多多,那么Express框架作为Node.js的一款MVC框架,那么自然也 ...

  9. 用jsonp实现搜索框功能

    用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...

  10. Ionic2学习笔记（7）：Input

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5554610.html           我们先来看一个简单的输入用户名和密码点击登录的界面:   ...