在练习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. smooth L1损失函数

    当预测值与目标值相差很大时,L2 Loss的梯度为(x-t),容易产生梯度爆炸,L1 Loss的梯度为常数,通过使用Smooth L1 Loss,在预测值与目标值相差较大时,由L2 Loss转为L1  ...

  2. wannafly 练习赛10 E 数列查找（莫队+分块分块分块......）

    链接:https://www.nowcoder.net/acm/contest/58/E 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K 64bit ...

  3. HDU6623 思维题（n分解成质因子的形式，问最小的幂是多少）

    题目大意:给你一个数n,把它分解为素数的幂次的乘积的形式:n=p1^e1 * p2^e2 * .......pk^ek  求最小的幂次是多少 n=le18 分析: 首先我们肯定是不可以枚举1e18的因 ...

  4. 2017年广东省ACM省赛（GDCPC-2017）总结

    今年第一次参加省赛(也是第一次参加这类比赛),既有点惊喜又有点紧张,前一晚没有怎么睡好,有点怕今年打铁,虽然说大一打铁也说的过去,可是谁也不想打铁. 一开始比赛的时候我一开始没有去看题,而是把我们队的 ...

  5. 576D Flights for Regular Customers

    分析 https://www.cnblogs.com/onioncyc/p/8037056.html 写的好像有点问题 但是大致就是这个意思 代码很好理解 代码 #include<bits/st ...

  6. mysql在linux下连接超慢的问题及解决办法

    今天一来公司发现mysql连接很慢很慢!!!!不知为啥!! 从其它地方连接MySQL数据库的时候,有时候很慢.慢的原因有可能是MySQL进行反向DNS解析造成的,这里简单介绍下原理,需要的朋友可以参考 ...

  7. leetcode 374. 猜数字大小(python)

    我们正在玩一个猜数字游戏. 游戏规则如下:我从 1 到 n 选择一个数字. 你需要猜我选择了哪个数字.每次你猜错了,我会告诉你这个数字是大了还是小了.你调用一个预先定义好的接口 guess(int n ...

  8. Vue知识整理9：class与style绑定

    1.v-bind:class:绑定class样式.通过控制isActive变量值来实现是否显示:通过.active样式设置背景颜色. 2.支持普通的class与v-bind绑定样式混合使用: v-bi ...

  9. 使用ffmpeg来转换media Video

    FFMPEG -i 1.wmv -c:v libx264 -strict -2 1_wmv.mp4 ffmpeg -i b.mp4 -codec copy -bsf h264_mp4toannexb ...

  10. fiddler之入门（安装配置）

    在工作中常常需要进行数据的抓包和发包,此时就可以用到fiddler这个工具了. fiddler是一个http协议调试代理工具,通过http代理,让数据从其通过,来坚挺本地计算机与访问网络之间的所有ht ...