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 相关文章推荐
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
使vue实现jQuery调用的两种方法
May 12 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
html中select语句读取mysql表中内容
2006/10/09 PHP
Windows下的PHP5.0详解
2006/11/18 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
Javascript !!的作用
2008/12/04 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
js实现五星评价功能
2017/03/08 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
Django数据库操作的实例(增删改查)
2017/09/04 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
环保建议书作文
2014/03/12 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
教师反邪教心得体会
2016/01/15 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
python APScheduler执行定时任务介绍
2022/04/19 Python