在练习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. B. Uniqueness

    B. Uniqueness 给定一个序列,要求删除一段连续子段,满足删掉子段后每个元素唯一 求最小子段长度 枚举起点,二分子段长度 记得先sort 再unique #include<bits/s ...

  2. 阿里知识储备之二——junit学习以及android单元测试

    一,junit框架 http://blog.csdn.net/afeilxc/article/details/6218908 详细见这篇博客 juit目前已经可以和maven项目进行集成和测试,而且貌 ...

  3. 浏览器HTML5录音功能

    一.浏览器HTML5录音功能 二.业务代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  4. 点云网格化算法---MPA

    MPA网格化算法思路 第一步:初始化一个种子三角面.(随机选点,基于该点进行临近搜索到第二点:在基于该线段中点临近搜索到第三点) 图1 第二步:在种子三角面的基础上,进行面片的扩充,利用边的中点进行临 ...

  5. Linux高级调试与优化——gdb调试命令

    番外 2019年7月26日至27日,公司邀请<软件调试>和<格蠹汇编——软件调试案例集锦>两本书的作者张银奎老师进行<Linux高级调试与优化>培训,有幸聆听张老师 ...

  6. EasyHook Creating a remote file monitor

    In this tutorial we will create a remote file monitor using EasyHook. We will cover how to: 使用EasyHo ...

  7. 硬件-硬盘-SSD（固态硬盘）：百科

    ylbtech-硬件-硬盘-SSD(固态硬盘):百科 固态驱动器(Solid State Disk或Solid State Drive,简称SSD),俗称固态硬盘,固态硬盘是用固态电子存储芯片阵列而制 ...

  8. GitHub - 解决 GitHub Page 404

    带有下划线的文件报 404 解决:在仓库文件夹根目录添加.nojekyll文件 参见: Bypassing Jekyll on GitHub Pages - The GitHub Blog How t ...

  9. np.random.shuffle(x)与np.random.permutation(x)

    来自:https://blog.csdn.net/brucewong0516/article/details/79012233 将数组打乱随机排列 两种方法: np.random.shuffle(x) ...

  10. window.screenLeft&&window.screenTop&&window.screenX&&window.screenY

    http://blog.sina.com.cn/s/blog_14e2a237b0102w4i0.html window.screenLeft&&window.screenTop&am ...