在練習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>
每天進步一點點
