<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. SSIS Design1: 源数据提取

    数据量的大小由两个方面决定:行的宽度和数据行的数量,为了减少ETL运行的时间,可以从源数据的提取上做优化,从数据源的输入上控制数据的质量和大小,减少转换和IO. 一,减少行的宽度 1,只加载需要的数据 ...

  2. Event的Propagate

    SSIS Package的Executable存在层次结构,例如Package位于层次结构的最顶层,Root Level:Container是其中包含的Executable(Task 或 Contai ...

  3. WPF如何仿制QQ2013登录窗口的关闭效果

    昨天,有位朋友问我,WPF能做出像QQ2013窗口在关闭时那个貌似透明过渡的动画吗?我就歪着脸跟他说:"只有你想不到的,没有WPF做不到的". 他又接着说:"我知道肯定会 ...

  4. jQuery 2.0.3 源码分析Sizzle引擎 - 高效查询

    为什么Sizzle很高效? 首先,从处理流程上理解,它总是先使用最高效的原生方法来做处理 HTML文档一共有这么四个API: getElementById 上下文只能是HTML文档 浏览器支持情况:I ...

  5. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  6. .cn根服务器被攻击之后

    如果是互联网行业的人员应该知道,8月25日凌晨,大批的“.cn”域名的网站都无法访问,当然包括weibo.cn等大型网站.个人比较奇怪的一件事情是,微博PC网页版是:www.weibo.com,而mo ...

  7. 查看nginx配置文件路径

    进入nginx安装目录(我的是/usr/local/nginx-1.7.8/) 进入sbin目录,输入 ./nginx -t查看nginx配置文件路径以及该文件语法是否正确 ./nginx -v查看n ...

  8. 最详细的网站改版SEO优化指南：如何让排名不降反升

    我知道,网站改版很是让人头疼.首先,这个过程需要很长时间还有大量工作要做,并且通常结果不会如你的预期.其次,改版确实有破坏之前为 SEO 所做努力的风险. 但不要因为通常网站改版带来排名下降就认为这是 ...

  9. 利用免费的Spire.XLS控件制作Excel报表

    我们小组上个季度接手了一个项目其中需要实现创建excel文档的功能,寻找实现这个功能的控件的任务分配给了我,通过百度搜索我找到了一个免费的控件,它是由E-iceblue公司推出的spire.xls控件 ...

  10. Spark入门实战系列--10.分布式内存文件系统Tachyon介绍及安装部署

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Tachyon介绍 1.1 Tachyon简介 随着实时计算的需求日益增多,分布式内存计算 ...