在练习jQuery表格变色例子过程中，发现了一下几个问题：

  1. 在IEEdge浏览器中切换选中行会出现上一个表格行背景色被吃掉的情况；
  2. 在chrome中从上向下单击行中任意单元可以选中该行，而从下往上单击虽选中了行，而前面的按钮列未显示选中状态

针对以上问题，查阅了资料后，发现了原因，以及解决方法：

  1. 为tbody设置border-collapse:collapse;方可解决吃色问题
  2. 在引用jQuery版本是1.6之后的，设置radio的checked属性不应使用attr()方法，应使用prop()方法

在之前的jQuery版本中，都是使用attr()访问对象的属性，比如取一个图片的alt属性，就可以这样做$('#img').attr('alt');但是在某些时候，比如访问input的disabled属性时，会有些问题，在有些浏览器中，只要写了disable属性就可以，有些则要写：disabled="disabled"。所以，从1.6版本开始，jQuery使用新方法prop()获取以及设置这些属性，返回标准属性：true/false。按照官方说明，如果设置disabled和checked这些属性，应使用prop()方法（摘自《锋利的jQuery（第2版）》）


附上我的代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html>

 <head>

     <title>表格变色</title>

     <style type="text/css">

         table{

             margin:auto;

             border:1px solid #ccc;

             padding:20px;

             text-align:left;

             /*添加上border-collapse属性设置之后就可以解决在IEedge中选择不同行之后吃色的问题*/

             border-collapse:collapse;

         }

         tr{

             padding:0px;

             margin:0px;

         }

         td{

             width:100px;

             padding: 0px;

         }

         th{

             border-bottom: 1px solid #ccc;

         }

         /*奇数行*/

         .odd{

             background: #ffffee;

         }

         /*偶数行*/

         .even{

             background: #fff38f;

         }

         .selected{

             background: gold;

             color:#fff;

         }

     </style>

     <script type="text/javascript" src="../jquery-3.4.1.js"></script>

     <script type="text/javascript">

         $(function(){

             $("tbody>tr:odd").addClass("odd");//先排除第一行,然后给奇数行添加样式

             $("tbody>tr:even").addClass("even");//先排除第一行,然后给偶数行添加样式

             $('tbody>tr').click(function(){

                 $(this)

                 .addClass('selected')

                 .siblings().removeClass('selected')

                 .end()

                 // .find(':radio').attr("checked",true);//在设置input的checked属性的时候，使用的是jq中的attr（）方法；这个方法在jquery1.6以后的版本使用的时候会出现问题，应换成prop()方法。prop()方法通常用来设置元素固有的属性，比如disabled和checked属性。

                 .find(':radio').prop("checked",true);

             });

             // 如果单选框默认情况下是选择的，则高色.

              // $('table :radio:checked').parent().parent().addClass('selected');

             //简化:

               // $('table :radio:checked').parents("tr").addClass('selected');

              //再简化:

              $('tbody>tr:has(:checked)').addClass('selected');

         })

     </script>

 </head>

 <body>

     <table>

         <thead>

             <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>

         </thead>

         <tbody>

             <tr><td><input type="radio" name="choice" checked='checked'></td><td>张三</td><td>男</td><td>北京</td></tr>

             <tr><td><input type="radio" name="choice"></td><td>李四</td><td>男</td><td>上海</td></tr>

             <tr><td><input type="radio" name="choice"></td><td>王五</td><td>女</td><td>北京</td></tr>

             <tr><td><input type="radio" name="choice"></td><td>小明</td><td>男</td><td>上海</td></tr>

             <tr><td><input type="radio" name="choice"></td><td>韩梅梅</td><td>女</td><td>北京</td></tr>

             <tr><td><input type="radio" name="choice"></td><td>大牛</td><td>男</td><td>上海</td></tr>

         </tbody>

     </table>

 </body>

 </html>

每天进步一点点

表格变色示例中发现的问题——attr()与prop()的更多相关文章

  1. jquery中dom元素的attr和prop方法的理解

    一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...

  2. JavaScript+CSS+DIV实现表格变色示例

    <!DOCTYPE html> <html> <head> <title>colortable.html</title> <scrip ...

  3. CSS中的content和attr的用法

    问题缘起 在闲看别人网站时发现了这样的代码 <span class="hamburger icon" data-icon="C"> .icon:be ...

  4. 2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色

    1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position: ...

  5. jquery中attr()与prop()区别

    我们知道jquery中获取元素属性有两种常见的方法,一个是attr()方法,这个是用的比较多的,也是我们第一个想到的.另外一个就是prop()方法了,这个方法之前很少用到,它是jquery1.6之后新 ...

  6. jQuery 中 attr() 和 prop() 方法的区别

    前几天,有人给 Multiple Select 插件 提了问题: setSelects doesn't work in Firefox when using jquery 1.9.0 一直都在用 jQ ...

  7. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  8. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  9. jquery中attr与prop的区别

    先从一个老生常谈的问题说起,使用jquery实现全选全不选.楼主先使用的jquery版本是 jquery-1.11.1.min.js 全选<input type="checkbox&q ...

随机推荐

  1. 创建 Smarty 对象

    /* //if (!defined('INIT_NO_SMARTY')) //{ header('Cache-control: private'); header('Content-type: tex ...

  2. Linux宝塔面板FTP无法连接的解决办法，跳坑实例

    宝塔面板的ftp无法使用解决 先检查这些内容 1.注意内网IP和外网IP 2.检查ftp服务是否启动 (面板首页即可看到) 3.检查防火墙20端口 ftp 21端口及被动端口39000 - 40000 ...

  3. Laravel提交POST请求报错

    提交POST请求出现如下错误: The page has expired due to inactivity Please refresh and try again 这是由于在Laravel框架中有 ...

  4. angular 的配置文件的应用

    为什么要使用 angular 的配置文件: 好处:我们可以在一个页面上,实现多个页面的跳转的感觉,但只是在一个页面上进行的操作: 我们的准备工作:下载 angular-route.js 插件 在依赖模 ...

  5. eclipse 4.32 安装 gradle

    更新网址  http://dist.springsource.com/release/TOOLS/gradle

  6. 异步分发任务celery

    Celery简介 Celery是一个功能完备即插即用的任务队列.它使得我们不需要考虑复杂的问题,使用非常简单. celery适用异步处理问题,当遇到发送邮件.或者文件上传, 图像处理等等一些比较耗时的 ...

  7. Nginx1.8源码包编译安装

    1.下载解压Nginx,为方便管理下载包一般将下载包放在指定目录下 ,即/usr/local/src/下. wget http://nginx.org/download/nginx-1.8.0.tar ...

  8. Python学习之==>集合

    1.简介 集合也是一种数据类型,一个类似列表东西,它的特点是无序的,不重复的,也就是说集合中是没有重复数据的. 2.集合的作用 它可以把一个列表中重复的数据去掉,而不需要你再写判断 可以做关系测试,比 ...

  9. sql 、linq、lambda 查询语句

    http://www.cnblogs.com/lei2007/archive/2011/07/21/2113161.html

  10. JMeter常用的4种参数化方式-操作解析

    目录结构 一.JMeter参数化简介 1.JMeter参数化的概念 2.JMeter参数化方式之使用场景对比 二.JMeter参数化的4种主要方式-操作演练 1.User Parameters(用户参 ...