编程 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和原生JavaScript实现网页定位导航特效

Apr 03 jQuery

jquery 校验中国身份证号码实例详解

Apr 11 jQuery

基于jQuery选择器之表单对象属性筛选选择器的实例

Sep 19 jQuery

jQuery完成表单验证的实例代码(纯代码)

Sep 30 jQuery

jquery根据name取得select选中的值实例(超简单)

Jan 25 jQuery

jQuery 改变P标签文本值方法

Feb 24 jQuery

通过jquery toggleClass()属性制作文章段落更改背景颜色

May 21 jQuery

使用jquery Ajax实现上传附件功能

Oct 23 jQuery

jQuery选择器选中最后一个元素，倒数第二个元素操作示例

Dec 10 jQuery

jQuery实现的卷帘门滑入滑出效果【案例】

Feb 18 jQuery

jQuery AJAX应用实例总结

May 19 jQuery

jQuery实现动态加载瀑布流

Sep 01 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

php mysql 判断update之后是否更新了的方法

2012/01/10 PHP

php使用curl模拟登录后采集页面的例子

2013/11/04 PHP

基于PHP的简单采集数据入库程序

2014/07/30 PHP

简单解决新浪SAE无法上传文件的问题

2015/05/13 PHP

php析构函数的简单使用说明

2015/08/24 PHP

PHP基于递归算法解决兔子生兔子问题

2018/05/11 PHP

JavaScript自定义事件介绍

2013/08/29 Javascript

JavaScript对象属性检查、增加、删除、访问操作实例

2015/07/08 Javascript

gulp-htmlmin压缩html的gulp插件实例代码

2016/06/06 Javascript

AngularJs Using $location详解及示例代码

2016/09/02 Javascript

JQuery手速测试小游戏实现思路详解

2016/09/20 Javascript

JS扩展类，克隆对象与混合类实例分析

2016/11/26 Javascript

用headjs来管理和加载js 提高网站加载速度

2016/11/29 Javascript

ES6中Array.copyWithin()函数的用法实例详解

2017/09/16 Javascript

vue获取DOM元素并设置属性的两种实现方法

2017/09/30 Javascript

vue.js在标签属性中插入变量参数的方法

2018/03/06 Javascript

详解微信JS-SDK选择图片遇到的坑

2018/08/15 Javascript

基于javascript canvas实现五子棋游戏

2020/07/08 Javascript

vue任意关系组件通信与跨组件监听状态vue-communication

2020/10/18 Javascript

python概率计算器实例分析

2015/03/25 Python

Python同时向控制台和文件输出日志logging的方法

2015/05/26 Python

python实现机器人卡牌

2019/10/06 Python

基于TensorFlow中自定义梯度的2种方式

2020/02/04 Python

TensorFLow 变量命名空间实例

2020/02/11 Python

pyCharm 设置调试输出窗口中文显示方式(字符码转换)

2020/06/09 Python

用Python 爬取猫眼电影数据分析《无名之辈》

2020/07/24 Python

python 批量下载bilibili视频的gui程序

2020/11/20 Python

python爬虫分布式获取数据的实例方法

2020/11/26 Python

5 分钟读懂Python 中的 Hook 钩子函数

2020/12/09 Python

图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

2016/01/20 HTML / CSS

雅诗兰黛美国官网：Estee Lauder美国

2016/07/21 全球购物

We Fashion荷兰：一家国际时装公司

2018/04/18 全球购物

幼儿师范毕业生自荐信

2013/11/09 职场文书

餐饮总经理岗位职责

2014/03/07 职场文书

中国梦演讲稿5分钟

2014/08/19 职场文书

2015年圣诞节活动总结

2015/03/24 职场文书