表格变色示例中发现的问题——attr()与prop()

程序员文章站 2023-01-22 14:28:27

在练习jQuery表格变色例子过程中，发现了一下几个问题：针对以上问题，查阅了资料后，发现了原因，以及解决方法：在之前的jQuery版本中，都是使用attr()访问对象的属性，比如取一个图片的alt属性，就可以这样做$('#img').attr('alt');但是在某些时候，比如访问input的 ......

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

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

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

为tbody设置border-collapse:collapse;方可解决吃色问题
在引用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版）》）

附上我的代码

 1 <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
 2 <html>
 3 <head>
 4     <title>表格变色</title>
 5     <style type="text/css">
 6         table{
 7             margin:auto;
 8             border:1px solid #ccc;
 9             padding:20px;
10             text-align:left;
11             /*添加上border-collapse属性设置之后就可以解决在ieedge中选择不同行之后吃色的问题*/
12             border-collapse:collapse;
13         }
14         tr{
15             padding:0px;
16             margin:0px;
17         }
18         td{
19             width:100px;
20             padding: 0px;            
21         }
22 
23         th{
24             border-bottom: 1px solid #ccc;
25         }
26         /*奇数行*/
27         .odd{
28             background: #ffffee;
29         }
30         /*偶数行*/
31         .even{
32             background: #fff38f;
33         }
34 
35         .selected{
36             background: gold;
37             color:#fff;
38         }
39     </style>
40     <script type="text/javascript" src="../jquery-3.4.1.js"></script>
41     <script type="text/javascript">
42         $(function(){
43             $("tbody>tr:odd").addclass("odd");//先排除第一行,然后给奇数行添加样式
44             $("tbody>tr:even").addclass("even");//先排除第一行,然后给偶数行添加样式
45 
46             $('tbody>tr').click(function(){
47                 $(this)
48                 .addclass('selected')
49                 .siblings().removeclass('selected')                    
50                 .end()
51                 // .find(':radio').attr("checked",true);//在设置input的checked属性的时候，使用的是jq中的attr（）方法；这个方法在jquery1.6以后的版本使用的时候会出现问题，应换成prop()方法。prop()方法通常用来设置元素固有的属性，比如disabled和checked属性。
52                 .find(':radio').prop("checked",true);                
53             });
54 
55             // 如果单选框默认情况下是选择的，则高色.
56              // $('table :radio:checked').parent().parent().addclass('selected');
57             //简化:
58               // $('table :radio:checked').parents("tr").addclass('selected');
59              //再简化:
60              $('tbody>tr:has(:checked)').addclass('selected');
61 
62         })
63     </script>    
64 </head>
65 <body>
66     <table>
67         <thead>
68             <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
69         </thead>
70         <tbody>
71             <tr><td><input type="radio" name="choice" checked='checked'></td><td>张三</td><td>男</td><td>北京</td></tr>
72             <tr><td><input type="radio" name="choice"></td><td>李四</td><td>男</td><td>上海</td></tr>
73             <tr><td><input type="radio" name="choice"></td><td>王五</td><td>女</td><td>北京</td></tr>
74             <tr><td><input type="radio" name="choice"></td><td>小明</td><td>男</td><td>上海</td></tr>
75             <tr><td><input type="radio" name="choice"></td><td>韩梅梅</td><td>女</td><td>北京</td></tr>
76             <tr><td><input type="radio" name="choice"></td><td>大牛</td><td>男</td><td>上海</td></tr>
77         </tbody>
78     </table>
79 </body>
80 </html>

每天进步一点点

上一篇：女性经络养生的12个小秘方

下一篇：按摩穴道解决女性便秘尴尬问题