<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. 【ssh信任关系】解决信任关系不生效问题

    配置的时候遇见点问题,发现即便将id_rsa.pub拷贝到了另一台机器上,信任也没有建立起来. 原因是另外一台机器上目录权限不对,可以通过su root后观察/var/log/message里的日志信 ...

  2. TSQL “匹配全部”语义的实现

    在TSQL中,有exists子句表示存在,表示匹配任意一行数据,但是,如何表示匹配全部的数据行.例如,表示一个学生选修了所有课程,这就是“匹配全部”语义的一个经典实例. 示例,获取“选修全部”课程的学 ...

  3. C#设计模式系列：代理模式（Proxy）

    代理模式提供了一个中介控制对某个对象的访问.现实生活中,我们可能会用支票在市场交易中用来代替现金,支票就是账户中资金的代理. 1.代理模式简介 1.1>.定义 代理模式(Proxy)定义:代理模 ...

  4. Spark中决策树源码分析

    1.Example 使用Spark MLlib中决策树分类器API,训练出一个决策树模型,使用Python开发. """ Decision Tree Classifica ...

  5. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  6. 引用类型-Array类型

    ECMAScript数组的每一项可以保存任何类型的数据,并且数组的大小是可以动态调整的. 创建数组的基本方式有两种,第一种是使用Array构造函数 var colors = new Array(); ...

  7. 为SubSonic3.0的查询（SubSonic.Query.Select和存储过程）添加更多的执行功能

    在使用SubSonic3.0的查询功能时,会发现想通过执行返回我们想要的数据,切没有相关的功能,比如说:SubSonic.Query.Select,在使用查询时没有返回DataSet或DataTabl ...

  8. UWP开发之Mvvmlight实践一：如何在项目中添加使用Mvvmlight(图文详解)

    最近一直在做UWP开发,为了节省成本等等接触到MVVMlight,觉得有必要发点时间研究它的用法与实现原理才行.如果有问题的地方或者有好的建议欢迎提出来. 随着移动开发的热门,Mvvmlight在An ...

  9. CSS兼容各浏览器的hack

    CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...

  10. PHP中的__toString方法(实现JS里的链式操作)

    _toString方法是在打印对象时自动调用的魔术方法,如果不声明会报以下错 Catchable fatal error: Object of class String could not be co ...