首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jQuery实现购物车全功能
Jan 11 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
redo log(1) 存储过程(3) MIME(1) 增删改查(2) binlog(2) 写入策略(1) B+树(2) 抖音(1) instantclient(1) 优化(1)
You might like
新浪新闻小偷
2006/10/09 PHP
强烈推荐：php.ini中文版(1)
2006/10/09 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP中使用BigMap实例
2015/03/30 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
js 动态添加标签（新增一行，其实很简单，就是几个函数的应用）
2009/03/26 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python简明入门教程
2015/08/04 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
在python里面运用多继承方法详解
2019/07/01 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
励志演讲稿300字
2014/08/21 职场文书
先进单位申报材料
2014/12/25 职场文书
php中pcntl_fork详解
2021/04/01 PHP