编程 Javascript jQuery

jQuery实现选中行变色效果(实例讲解)

Posted in jQuery onJuly 06, 2017

//点击复选框添加样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    table {
      border: 0;
      border-collapse: collapse;
    }

    td {
      font: normal 12px/17px Arial;
      padding: 2px;
      width: 100px;
    }

    th {
      font: bold 12px/17px Arial;
      text-align: left;
      padding: 4px;
      border-bottom: 1px solid #333;
    }

    .even {
      background: #FFF38F;
    }

    /* 偶数行样式*/
    .odd {
      background: #FFFFEE;
    }

    /* 奇数行样式*/
    .selected {
      background: #FF6500;
      color: #fff;
    }
  </style>
  <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("tbody tr:even").addClass("even");
      $("tbody tr:odd").addClass("odd");
      $(":checkbox").change(function () {
        if ($(this).is(":checked")) {
          $(this).parents("tr").addClass("selected");
        }else{
          $(this).parents("tr").removeClass("selected");
        }
      });
      //初始化默认选中色selected样式
      $(":checkbox").each(function () {
        if ($(this).is(":checked")) {
          $(this).parents("tr").addClass("selected");
        }
      })
    })
  </script>
</head>
<body>
<table>
  <thead>
  <tr>
    <th></th>
    <th>姓名</th>
    <th>性别</th>
    <th>暂住地</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>张山</td>
    <td>男</td>
    <td>浙江宁波</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>李四</td>
    <td>女</td>
    <td>浙江杭州</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value="" checked='checked'/></td>
    <td>王五</td>
    <td>男</td>
    <td>湖南长沙</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>找六</td>
    <td>男</td>
    <td>浙江温州</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>Rain</td>
    <td>男</td>
    <td>浙江杭州</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>MAXMAN</td>
    <td>女</td>
    <td>浙江杭州</td>
  </tr>
  </tbody>
</table>
</body>
</html>

//点击行添加样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    table {
      border: 0;
      border-collapse: collapse;
    }

    td {
      font: normal 12px/17px Arial;
      padding: 2px;
      width: 100px;
    }

    th {
      font: bold 12px/17px Arial;
      text-align: left;
      padding: 4px;
      border-bottom: 1px solid #333;
    }

    .even {
      background: #FFF38F;
    }

    /* 偶数行样式*/
    .odd {
      background: #FFFFEE;
    }

    /* 奇数行样式*/
    .selected {
      background: #FF6500;
      color: #fff;
    }
  </style>
  <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("tbody tr:even").addClass("even");
      $("tbody tr:odd").addClass("odd");
      $("tbody tr").click(function () {
        var hasselect = $(this).hasClass("selected");
        if (hasselect) {
          $(this).removeClass("selected");
          $(this).find("input").attr("checked", false);
        } else {
          $(this).addClass("selected");
          $(this).find("input").attr("checked", true);
        }
      })
      $('tbody>tr:has(:checked)').addClass('selected');
//      $(":checkbox").each(function () {
//        if ($(this).is(":checked")) {
//          $(this).parents("tr").addClass("selected");
//        }
//      })

    })
  </script>
</head>
<body>
<table>
  <thead>
  <tr>
    <th></th>
    <th>姓名</th>
    <th>性别</th>
    <th>暂住地</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>张山</td>
    <td>男</td>
    <td>浙江宁波</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>李四</td>
    <td>女</td>
    <td>浙江杭州</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value="" checked='checked'/></td>
    <td>王五</td>
    <td>男</td>
    <td>湖南长沙</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>找六</td>
    <td>男</td>
    <td>浙江温州</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>Rain</td>
    <td>男</td>
    <td>浙江杭州</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>MAXMAN</td>
    <td>女</td>
    <td>浙江杭州</td>
  </tr>
  </tbody>
</table>
</body>
</html>

以上这篇jQuery实现选中行变色效果(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

jQuery实现选中行变色效果(实例讲解)

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐

vue中如何引入jQuery和Bootstrap

Apr 10 jQuery

jQuery日期范围选择器附源码下载

May 23 jQuery

JQuery和html+css实现带小圆点和左右按钮的轮播图实例

Jul 22 jQuery

jQuery实现的文字逐行向上间歇滚动效果示例

Sep 06 jQuery

jQuery UI 实例讲解 - 日期选择器(Datepicker)

Sep 18 jQuery

jQuery判断网页是否已经滚动到浏览器底部的实现方法

Oct 27 jQuery

jQuery实现的简单前端搜索功能示例

Oct 28 jQuery

jQuery读取本地的json文件(实例讲解)

Oct 31 jQuery

jQuery动态添加li标签并添加属性和绑定事件方法

Feb 24 jQuery

jQuery的ztree仿windows文件新建和拖拽功能的实现代码

Dec 05 jQuery

JQuery搜索框自动补全(模糊匹配)功能实现示例

Jan 08 jQuery

jquery实现上传图片功能

Jun 29 jQuery

运用jQuery写的验证表单(实例讲解)

Jul 06 #jQuery

使用 jQuery 实现表单验证功能

Jul 05 #jQuery

jQuery制作input提示内容（兼容IE8以上）

Jul 05 #jQuery

jQuery常见面试题之DOM操作详析

Jul 05 #jQuery

jQuery使用ajax_动力节点Java学院整理

Jul 05 #jQuery

jQuery扩展_动力节点Java学院整理

Jul 05 #jQuery

jQuery选择器_动力节点Java学院整理

Jul 05 #jQuery

You might like

某大型网络公司应聘时的笔试题目附答案

2008/03/27 PHP

php下几个常用的去空、分组、调试数组函数

2009/02/22 PHP

PHP学习笔记用户注册模块用户类以及验证码类

2011/09/20 PHP

2012/09/29 PHP

Jquery实现无刷新DropDownList联动实现代码

2010/03/08 Javascript

基于JQuery的简单实现折叠菜单代码

2010/09/15 Javascript

基于jquery循环map功能的代码

2011/02/26 Javascript

使用JS画图之点、线、面

2015/01/12 Javascript

javascript 获取浏览器版本

2015/01/21 Javascript

运行Node.js的IIS扩展iisnode安装配置笔记

2015/03/02 Javascript

JQuery中DOM加载与事件执行实例分析

2015/06/13 Javascript

Jquery实现仿京东商城省市联动菜单

2015/11/19 Javascript

jQuery删除节点用法示例(remove方法)

2016/09/08 Javascript

js实现彩色条纹滚动条效果

2017/03/15 Javascript

详解react内联样式使用webpack将px转rem

2018/09/13 Javascript

在Koa.js中实现文件上传的接口功能

2019/10/08 Javascript

Vue过滤器,生命周期函数和vue-resource简单介绍

2021/01/12 Vue.js

学习python处理python编码问题

2011/03/13 Python

本地文件上传到七牛云服务器示例(七牛云存储)

2014/01/11 Python

python中函数总结之装饰器闭包详解

2016/06/12 Python

浅谈Python中的zip()与*zip()函数详解

2018/02/24 Python

使用Python向DataFrame中指定位置添加一列或多列的方法

2019/01/29 Python

解决Python数据可视化中文部分显示方块问题

2020/05/16 Python

MySQL面试题

2014/01/12 面试题

程序员经常用到的UNIX命令

2015/04/13 面试题

应届生保险求职信

2013/11/11 职场文书

行政专员岗位职责

2014/01/02 职场文书

校园安全教育广播稿

2014/02/17 职场文书

村长贪污检举信

2014/04/04 职场文书

绿色校园广播稿

2014/10/13 职场文书

预备党员2014年第四季度思想汇报范文

2014/10/25 职场文书

银行自荐信怎么写

2015/03/05 职场文书

出纳岗位职责范本

2015/03/31 职场文书

教师继续教育反思周记

2015/06/25 职场文书

大学自主招生自荐信（2016精选篇）

2016/01/28 职场文书

python微信智能AI机器人实现多种支付方式

2022/04/12 Python