编程 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 Tree Multiselect使用详解

May 02 jQuery

运用jQuery写的验证表单(实例讲解)

Jul 06 jQuery

jquery版轮播图效果和extend扩展

Jul 18 jQuery

jQuery实现的表格前端排序功能示例

Sep 18 jQuery

基于jQuery实现定位导航位置效果

Nov 15 jQuery

jquery中有哪些api jQuery主要API

Nov 20 jQuery

jQuery中可见性过滤器简单用法示例

Mar 31 jQuery

jQuery实现判断上传图片类型和大小的方法示例

Apr 11 jQuery

jQuery实现上下滚动公告栏详细代码

Nov 21 jQuery

JQuery事件委托原理与用法实例分析

May 13 jQuery

jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析

Apr 30 jQuery

jquery插件实现图片悬浮

Apr 16 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表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法

2013/01/06 PHP

深入解析PHP中的(伪)多线程与多进程

2013/07/01 PHP

PHP return语句另类用法不止是在函数中

2014/09/17 PHP

php计数排序算法的实现代码(附四个实例代码)

2020/03/31 PHP

js操作时间（年-月-日时-分-秒星期几）

2010/06/20 Javascript

使用CSS和jQuery模拟select并附提交后取得数据的代码

2013/10/18 Javascript

js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

2013/12/11 Javascript

html dom节点操作(获取/修改/添加或删除)

2014/01/23 Javascript

jQuery 1.9.1源码分析系列（十五)之动画处理

2015/12/03 Javascript

JavaScript基础教程——入门必看篇

2016/05/20 Javascript

第一篇初识bootstrap

2016/06/21 Javascript

Vue.js创建Calendar日历效果

2016/11/03 Javascript

浅谈Node.js：理解stream

2016/12/08 Javascript

Jquery与Bootstrap实现后台管理页面增删改查功能示例

2017/01/22 Javascript

JS实现的数字格式化功能示例

2017/02/10 Javascript

JS中mouseup事件丢失的原因与解决办法

2017/06/14 Javascript

centos 上快速搭建ghost博客方法分享

2018/05/23 Javascript

微信小程序实现简单跑马灯效果

2020/05/26 Javascript

node.js中express模块创建服务器和http模块客户端发请求

2019/03/06 Javascript

Vue SSR 即时编译技术的实现

2020/05/06 Javascript

解决vue自定义指令导致的内存泄漏问题

2020/08/04 Javascript

[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC

2018/04/05 DOTA

[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2

2018/06/03 DOTA

python3利用smtplib通过qq邮箱发送邮件方法示例

2017/12/03 Python

Django中针对基于类的视图添加csrf_exempt实例代码

2018/02/11 Python

pandas数据清洗,排序,索引设置,数据选取方法

2018/05/18 Python

Python 使用多属性来进行排序

2019/09/01 Python

python pyecharts 实现一个文件绘制多张图

2020/05/13 Python

Python Selenium实现无可视化界面过程解析

2020/08/25 Python

PyCharm设置注释字体颜色以及是否倾斜的操作

2020/09/16 Python

会计电算化学生个人的自我评价

2014/02/08 职场文书

万能检讨书

2015/01/27 职场文书

小学生学习保证书

2015/02/26 职场文书

国家助学金受助感言

2015/08/01 职场文书

五年级语文教学反思

2016/03/03 职场文书

职场干货：简历中的自我评价应该这样写！

2019/05/06 职场文书