在练习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. 使用Eigen遇到恶心报错

    参考博客:https://www.cnblogs.com/wongyi/p/8734346.html 1. 数据类型报错 /home/wy/workdir/slambook/ch3/useEigen/ ...

  2. Python深度学习读书笔记-1.什么是深度学习

    人工智能 什么是人工智能.机器学习与深度学习(见图1-1)?这三者之间有什么关系?

  3. java hashset输出

    for (Map.Entry<String, String> me : id_label_map.entrySet()) { System.out.println(me.getKey() ...

  4. python - 标准库：traceback模块

    traceback 模块: 允许你在程序里打印异常的跟踪返回 (Traceback)信息, 类似未捕获异常时解释器所做的. import traceback try: raise SyntaxErro ...

  5. 阶段3 1.Mybatis_09.Mybatis的多表操作_9 mybatis多对多操作-查询用户获取用户所包含的角色信息

    sql语句以user作为主表 用户的全部信息,以为用户下的角色的.并不是所有的用户都有角色,有角色的就带角色.没角色的就为null 首先修改实体类 定义List<Role> 生成gette ...

  6. Hand on Machine Learning第三章课后作业(2)：其余小练习

    -#!/usr/bin/env python -# # # -- coding: utf-8 -- -# # # @Time : 2019.5.22 14:09 -# # # @Author : An ...

  7. 20191128 Spring Boot官方文档学习（9.10）

    9.10.数据库初始化 可以使用不同的方式初始化SQL数据库,具体取决于堆栈是什么.当然,如果数据库是一个单独的进程,您也可以手动执行.建议使用单一机制进行模式生成. 9.10.1.使用JPA初始化数 ...

  8. Redis的 SLAVEOF 命令

    SLAVEOF host port SLAVEOF 命令用于在 Redis 运行时动态地修改复制(replication)功能的行为. 通过执行 SLAVEOF host port 命令,可以将当前服 ...

  9. xmake新增对WDK驱动编译环境支持

    xmake v2.2.1新版本现已支持WDK驱动编译环境,我们可以直接在系统原生cmd终端下,执行xmake进行驱动编译,甚至配合vscode, sublime text, IDEA等编辑器+xmak ...

  10. Double类型的数值 在写入excel时 如何去掉 科学计算法的 后面数值+ E的 情况

    Double start = 20190724100000.000; 写入excel时 是 201907E+13 但想要输出的是 20190724100000 这种格式 Java在java.math包 ...