在練習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="https://www.cnblogs.com/planetwithpig/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>
每天進步一點點
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39143.html
標籤：jQuery