In the course of practicing the example of jQuery table discoloration, several problems were found:
- Switching the selected row in IEEdge browser will result in the background color of the previous table row being eaten.
- In chrome, you can select a row by clicking any cell in the row from top to bottom, while a row is selected by clicking from bottom to top, while the previous button column does not show the selected state.
In view of the above problems, after consulting the data, we found the reasons and solutions:
- Setting border-collapse:collapse for tbody can solve the problem of eating color.
- After referring to jQuery version 1.6, the attr() method should not be used to set the checked property of radio, but the prop() method should be used.
In previous versions of jQuery, attr() was used to access attributes of objects, such as ALT attributes of a picture, so that $(' img').attr('alt'); but sometimes, for example, when accessing disabled attributes of input, there are some problems. In some browsers, as long as disabled attributes are written, some need to write: disabled="disabled". So, starting with version 1.6, jQuery uses the new method prop() to get and set these attributes, returning the standard attribute: true/false. According to official instructions, if disabled and checked are set, the prop() method should be used (excerpted from Sharp jQuery (2nd Edition))
Attach my code
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>Form discoloration</title> 5 <style type="text/css"> 6 table{ 7 margin:auto; 8 border:1px solid #ccc; 9 padding:20px; 10 text-align:left; 11 /*Adding border-collapse attribute settings solves the problem of color eating after selecting different rows in 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 /*Odd row*/ 27 .odd{ 28 background: #ffffee; 29 } 30 /*Even number line*/ 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");//Exclude the first line first,Then add styles to odd rows 44 $("tbody>tr:even").addClass("even");//Exclude the first line first,Then add styles to even rows 45 46 $('tbody>tr').click(function(){ 47 $(this) 48 .addClass('selected') 49 .siblings().removeClass('selected') 50 .end() 51 // .find(':radio').attr("checked",true);//When setting the checked attribute of input, the attr () method in jq is used; this method will cause problems in later versions of jQuery 1.6 and should be replaced by the prop() method. The prop() method is usually used to set the inherent attributes of elements, such as disabled and checked attributes. 52 .find(':radio').prop("checked",true); 53 }); 54 55 // If the radio box is selected by default, the color is high. 56 // $('table :radio:checked').parent().parent().addClass('selected'); 57 //Simplify: 58 // $('table :radio:checked').parents("tr").addClass('selected'); 59 //Further simplification: 60 $('tbody>tr:has(:checked)').addClass('selected'); 61 62 }) 63 </script> 64 </head> 65 <body> 66 <table> 67 <thead> 68 <tr><th></th><th>Full name</th><th>Gender</th><th>Temporary residence</th></tr> 69 </thead> 70 <tbody> 71 <tr><td><input type="radio" name="choice" checked='checked'></td><td>Zhang San</td><td>male</td><td>Beijing</td></tr> 72 <tr><td><input type="radio" name="choice"></td><td>Li Si</td><td>male</td><td>Shanghai</td></tr> 73 <tr><td><input type="radio" name="choice"></td><td>Wang Wu</td><td>female</td><td>Beijing</td></tr> 74 <tr><td><input type="radio" name="choice"></td><td>Xiao Ming</td><td>male</td><td>Shanghai</td></tr> 75 <tr><td><input type="radio" name="choice"></td><td>Mei Mei Han</td><td>female</td><td>Beijing</td></tr> 76 <tr><td><input type="radio" name="choice"></td><td>Daniel</td><td>male</td><td>Shanghai</td></tr> 77 </tbody> 78 </table> 79 </body> 80 </html>
Make a little progress every day