當前位置：
首頁 >
jquery表格复选框简单练习及prop(),attr()的应用原则
發布時間：2025/5/22
18
豆豆
生活随笔
收集整理的這篇文章主要介紹了
jquery表格复选框简单练习及prop(),attr()的应用原则
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
table_style.css 樣式
table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} .even { background:#FFF38F;} /* 偶數行樣式*/ .odd { background:#FFFFEE;} /* 奇數行樣式*/ .selected { background:#FF6500;color:#fff;} <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/table_style.css" rel="stylesheet" type="text/css" /> </head> <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script><script type="text/javascript">//這里用的jquery版本是3.1.1//這里關于如何選擇用prop和attr//第一原則:只添加屬性名稱該屬性就會生效應該使用prop;//第二原則:只?true/false的屬性使用prop 比如disabled 和checked 這些屬性 否則你下面會出現bug $(function(){$("tbody>tr:odd").addClass("odd");$("tbody>tr:even").addClass("even");$('tbody>tr').click(function() {/* if ($(this).hasClass('selected')) {$(this).removeClass('selected').find(':checkbox').prop('checked',false);}else{$(this).addClass('selected').find(':checkbox').prop('checked',true);} */var hasSelected=$(this).hasClass("selected");//三元運算 $(this)[hasSelected ? "removeClass" : "addClass"]('selected')// 注意這里不能用attr仔細一點你就會發現bug如果用attr .find(":checkbox").prop('checked',!hasSelected);});});</script><body><table><thead><tr><th> </th><th>姓名</th><th>性別</th><th>暫住地</th></tr></thead><tbody><tr><td><input type="checkbox" name="choice" value=""/></td><td>張山</td><td>男</td><td>浙江寧波</td></tr><tr><td><input type="checkbox" name="choice" value="" /></td><td>李四</td><td>女</td><td>浙江杭州</td></tr><tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td><td>王五</td><td>男</td><td>湖南長沙</td></tr><tr><td><input type="checkbox" name="choice" value="" /></td><td>找六</td><td>男</td><td>浙江溫州</td></tr><tr><td><input type="checkbox" name="choice" value="" /></td><td>Rain</td><td>男</td><td>浙江杭州</td></tr><tr><td><input type="checkbox" name="choice" value="" /></td><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr></tbody></table></body> </html>
table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} .even { background:#FFF38F;} /* 偶數行樣式*/ .odd { background:#FFFFEE;} /* 奇數行樣式*/ .selected { background:#FF6500;color:#fff;} <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/table_style.css" rel="stylesheet" type="text/css" /> </head> <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script><script type="text/javascript">//這里用的jquery版本是3.1.1//這里關于如何選擇用prop和attr//第一原則:只添加屬性名稱該屬性就會生效應該使用prop;//第二原則:只?true/false的屬性使用prop 比如disabled 和checked 這些屬性 否則你下面會出現bug $(function(){$("tbody>tr:odd").addClass("odd");$("tbody>tr:even").addClass("even");$('tbody>tr').click(function() {/* if ($(this).hasClass('selected')) {$(this).removeClass('selected').find(':checkbox').prop('checked',false);}else{$(this).addClass('selected').find(':checkbox').prop('checked',true);} */var hasSelected=$(this).hasClass("selected");//三元運算 $(this)[hasSelected ? "removeClass" : "addClass"]('selected')// 注意這里不能用attr仔細一點你就會發現bug如果用attr .find(":checkbox").prop('checked',!hasSelected);});});</script><body><table><thead><tr><th> </th><th>姓名</th><th>性別</th><th>暫住地</th></tr></thead><tbody><tr><td><input type="checkbox" name="choice" value=""/></td><td>張山</td><td>男</td><td>浙江寧波</td></tr><tr><td><input type="checkbox" name="choice" value="" /></td><td>李四</td><td>女</td><td>浙江杭州</td></tr><tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td><td>王五</td><td>男</td><td>湖南長沙</td></tr><tr><td><input type="checkbox" name="choice" value="" /></td><td>找六</td><td>男</td><td>浙江溫州</td></tr><tr><td><input type="checkbox" name="choice" value="" /></td><td>Rain</td><td>男</td><td>浙江杭州</td></tr><tr><td><input type="checkbox" name="choice" value="" /></td><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr></tbody></table></body> </html>
?
轉載于:https://www.cnblogs.com/hu-bo/p/6598981.html
總結
以上是生活随笔為你收集整理的jquery表格复选框简单练习及prop(),attr()的应用原则的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring使用外部属性文件
- 下一篇： u盘怎么格式化字节 U盘格式化的步骤和方