<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. ArchLinux安装指南

    将ArchLinux作为进阶Linux发行版,主要看重滚动更新和深入理解Linux的安装过程. 由于是新手,所以先选择在公司电脑上用VMware来安装.然后渐进到借助U盘在win10笔记本上安装双系统 ...

  2. Latch2：Latch和性能

    1,数据的IO操作 SQL Server访问的任何一个Page必须存在于内存中,如果不存在于内存中,那么SQL Server发出 Disk IO请求,将数据页从Disk读取到内存中,然后SQL Ser ...

  3. WindowsError的错误代码详解

    0操作成功完成. 1功能错误. 2系统找不到指定的文件. 3系统找不到指定的路径. 4系统无法打开文件. 5拒绝访问. 6句柄无效. 7存储控制块被损坏. 8存储空间不足,无法处理此命令. 9存储控制 ...

  4. 配置 DHCP 服务 - 每天5分钟玩转 OpenStack（89）

    前面章节我们看到 instance 在启动过程中能够从 Neutron 的 DHCP 服务获得 IP,本节将详细讨论其内部实现机制. Neutron 提供 DHCP 服务的组件是 DHCP agent ...

  5. ABZ理论

    前言 身为著名的创业者+投资人,LinkedIn和Paypal的联合创始人Reid Hoffman有一个令我印象深刻的ABZ理论,他认为,你在任何时刻,手中都需要有三个计划:A计划.B计划和Z计划. ...

  6. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  7. Windows 10 技术预览版9926 “未知源”引起系统休眠后自启的解决办法

    问题的由来: 自从安装上了最新发布的Windows 10 ,使用起来有诸多的改进:无论是重绘的图标还是通知消息中心的整合还是更智能的OneDrive客户端都使得工作起来非常愉悦. 不过笔者这两天频繁遇 ...

  8. 【JUC】JDK1.8源码分析之CountDownLatch（五）

    一.前言 分析完了CyclicBarrier后,下面分析CountDownLatch,CountDownLatch用于同步一个或多个任务,强制他们等待由其他任务执行的一组操作完成.CountDownL ...

  9. 本周博客--WinForm线程初步 2014-10-31 09:15 54人阅读 评论(0) 收藏

    嗯,WinForm作为一个比较程序的微软的技术已经为我们服务了很久很久,在技术不断更新的今天WinForm虽显老态龙钟但是在客户端快速开发中,它的地位还是无可取代的 今天就来分享一下WinForm中的 ...

  10. 为你带来灵感的 20 个 HTML5/CSS3 模板

    1. Curve 2. Tapestry 3. Aqueous 4. Deliccio 5. Respond 1.5 6. Triangle Responsive 7. Design Company ...