编程 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 相关文章推荐

jquery实现图片平滑滚动详解

Mar 22 jQuery

jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)

May 20 jQuery

基于jquery日历价格、库存等设置插件

Jul 05 jQuery

各种选择框jQuery的选中方法(实例讲解)

Jun 27 jQuery

JQuery扩展对象方法操作示例

Aug 21 jQuery

jQuery ajax仿Google自动提示SearchSuggess功能示例

Mar 28 jQuery

JS实现点击生成UUID的方法完整实例【基于jQuery】

Jun 12 jQuery

jquery中为什么能用$操作

Jun 18 jQuery

jQuery与原生JavaScript选择HTML元素集合用法对比分析

Nov 26 jQuery

jQuery实现可编辑的表格

Dec 11 jQuery

jquery实现抽奖功能

Oct 22 jQuery

jquery实现点击左右按钮切换图片

Jan 27 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

我的论坛源代码(一)

2006/10/09 PHP

PHP源代码数组统计count分析

2011/08/02 PHP

PHP+MySQL实现模糊查询员工信息功能示例

2018/06/01 PHP

phpstorm 配置xdebug的示例代码

2019/03/31 PHP

如何在PHP中读写文件

2020/09/07 PHP

由prototype_1.3.1进入javascript殿堂－类的初探

2006/11/06 Javascript

javascript获取xml节点的最大值(实现代码)

2013/12/11 Javascript

director.js实现前端路由使用实例

2015/02/03 Javascript

jquery中EasyUI实现异步树

2015/03/01 Javascript

jquery实现鼠标拖拽滑动效果来选择数字的方法

2015/05/04 Javascript

详解JavaScript权威指南之对象

2016/09/27 Javascript

简单模拟node.js中require的加载机制

2016/10/27 Javascript

使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

2017/01/04 Javascript

微信小程序实现折叠面板

2018/01/31 Javascript

详解Vue项目引入CreateJS的方法（亲测可用）

2019/05/30 Javascript

js+html实现周岁年龄计算器

2019/06/25 Javascript

JavaScript数值类型知识汇总

2019/11/17 Javascript

Vue中通过属性绑定为元素绑定style行内样式的实例代码

2020/04/30 Javascript

Nodejs环境实现socket通信过程解析

2020/07/03 NodeJs

python基础之包的导入和__init__.py的介绍

2018/01/08 Python

python多进程提取处理大量文本的关键词方法

2018/06/05 Python

pytorch 转换矩阵的维数位置方法

2018/12/08 Python

FFT快速傅里叶变换的python实现过程解析

2019/10/21 Python

完美解决keras 读取多个hdf5文件进行训练的问题

2020/07/01 Python

详解vscode实现远程linux服务器上Python开发

2020/11/10 Python

HTML5之SVG 2D入门5—颜色的表示及定义方式

2013/01/30 HTML / CSS

amazeui页面校验功能的实现代码

2020/08/24 HTML / CSS

罗兰·穆雷官网：Roland Mouret

2018/09/28 全球购物

新东方旗下远程教育网站：新东方在线

2020/03/19 全球购物

Internet体系结构

2014/12/21 面试题

java程序员面试交流

2012/11/29 面试题

商务考察邀请函范文

2014/01/21 职场文书

学生会部长竞聘书

2014/03/31 职场文书

2014年销售人员工作总结

2014/11/27 职场文书

幼师个人总结范文

2015/02/28 职场文书

红色电影观后感

2015/06/18 职场文书