首页
所有分类
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 相关文章推荐
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery中event.target和this的区别详解
Aug 13 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
数据保存(1) decorator(1) 矩阵(1) translation(2) bs4(1) 网页解析(1) 装饰器(1) 数组(5) 读取(1) 查找算法(1)
You might like
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
angularjs指令之绑定策略（@、=、&amp;）
2017/04/13 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
利用Python获取操作系统信息实例
2016/09/02 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
Python中return函数返回值实例用法
2020/11/19 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
美国性感内衣店：Yandy
2018/06/12 全球购物
Cinque网上商店：德国服装品牌
2019/03/17 全球购物
main 函数执行以前，还会执行什么代码
2013/04/17 面试题
电气自动化个人求职信范文
2014/02/03 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
运动会致辞稿
2015/07/29 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL