首页
所有分类
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+ajax实现局部刷新的两种方法
Jun 08 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
JDK(1) 云服务器(1) 九宫格(5) TaiShan(1) Foreign Key(1) RecyclerView(1) 内存池(1) queue(1) Hadoop(1) 腾讯云(1)
You might like
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
Javascript调用C#代码
2011/01/17 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
详解js中构造流程图的核心技术JsPlumb（2）
2015/12/08 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Numpy之reshape()使用详解
2019/12/26 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商：Unineed
2016/11/21 全球购物
工作疏忽检讨书
2014/01/25 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python