首页
所有分类
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平滑滚动到顶部插件使用详解
May 08 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 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) ref(1) geoserver(1) sql模式(1) 全表扫描(1) lua(3) 相对定位(1) 绝对定位(1) 索引树扫描(1) postcss-px2rem(1)
You might like
一个PHP+MSSQL分页的例子
2006/10/09 PHP
php桌面中心(四) 数据显示
2007/03/11 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
一个javascript参数的小问题
2008/03/02 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
js html实现计算器功能
2018/11/13 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
Python实现备份文件实例
2014/09/16 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
虚拟机下载python是否需要联网
2020/07/27 Python
Python实现一个论文下载器的过程
2021/01/18 Python
Python 实现劳拉游戏的实例代码（四连环、重力四子棋）
2021/03/03 Python
美国运动鞋和运动服零售商：Footaction
2017/04/07 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
自我评价个人范文
2013/12/16 职场文书
六查六看自查材料
2014/02/17 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
课外活动总结范文
2014/07/09 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
奖学金感谢信
2015/01/21 职场文书