在练习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. css了解一下!!!

    css简介 css(cascading style sheet,层叠样式表):为了让网页的内容核样式拆分开; 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染); css语法 cs ...

  2. 【Leetcode】买卖股票-贪心算法

    题目: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必 ...

  3. Android 5种Toast特效

    Toast是Android中用来显示显示信息的一种机制,和Dialog不一样的是,Toast是没有焦点的,而且Toast显示的时间有限,过一定的时间就会自动消失.   1.默认效果: Toast.ma ...

  4. 图的深度优先搜索(DFS)和广度优先搜索(BFS)算法

    深度优先(DFS) 深度优先遍历,从初始访问结点出发,我们知道初始访问结点可能有多个邻接结点,深度优先遍历的策略就是首先访问第一个邻接结点,然后再以这个被访问的邻接结点作为初始结点,访问它的第一个邻接 ...

  5. ACM ICPC 2011-2012 Northeastern European Regional Contest（NEERC）B Binary Encoding

    B: 现在有一种新的2进制表示法,要你求出0~m-1的每个数的表示. 规则如下:n 是满足 m<=2n 最小数. 而0~m-1的数只能够用n-1个位和n个位来表示. 对于n个位表示的数来说不能有 ...

  6. 1450：【例 3】Knight Moves

    1450:[例 3]Knight Moves  题解 这道题可以用双向宽度搜索优化(总介绍在  BFS ) 给定了起始状态和结束状态,求最少步数,显然是用BFS,为了节省时间,选择双向BFS. 双向B ...

  7. Type.MakeGenericType 方法 (Type[]) 泛型反射

    替代由当前泛型类型定义的类型参数组成的类型数组的元素,并返回表示结果构造类型的 Type 对象. 命名空间:   System程序集:  mscorlib(mscorlib.dll 中) public ...

  8. oracle之VARCHAR2(50 CHAR) 和VARCHAR2(50) 区别？

      首先要明白的是:根据字符集不同,varchar2(50)这样在gbk可存25个汉字,utf8可存16个汉字 这里的50相当于50BYTE,是按字节计数,50CHAR是按字符计数. 对于多字节字符( ...

  9. 3,、maven修改jar包下载为国内镜像下载地址

    maven 默认的中央仓库是在国外的服务器,下载速度慢,有时候稍不注意就下载出错 通常我将maven的中央仓库修改为阿里云的地址,下载速度很快体验非常好 修改conf下的setting.xml文件 在 ...

  10. xshell6，xftp下载

    https://www.netsarang.com/zh/free-for-home-school/