當(dāng)前位置：
首頁 >
jquery表格复选框简单练习及prop(),attr()的应用原则
發(fā)布時間：2025/5/22
39
豆豆
生活随笔
收集整理的這篇文章主要介紹了
jquery表格复选框简单练习及prop(),attr()的应用原则
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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;} /* 偶數(shù)行樣式*/ .odd { background:#FFFFEE;} /* 奇數(shù)行樣式*/ .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//這里關(guān)于如何選擇用prop和attr//第一原則:只添加屬性名稱該屬性就會生效應(yīng)該使用prop;//第二原則:只?true/false的屬性使用prop 比如disabled 和checked 這些屬性 否則你下面會出現(xiàn)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");//三元運(yùn)算 $(this)[hasSelected ? "removeClass" : "addClass"]('selected')// 注意這里不能用attr仔細(xì)一點(diǎn)你就會發(fā)現(xiàn)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;} /* 偶數(shù)行樣式*/ .odd { background:#FFFFEE;} /* 奇數(shù)行樣式*/ .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//這里關(guān)于如何選擇用prop和attr//第一原則:只添加屬性名稱該屬性就會生效應(yīng)該使用prop;//第二原則:只?true/false的屬性使用prop 比如disabled 和checked 這些屬性 否則你下面會出現(xiàn)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");//三元運(yùn)算 $(this)[hasSelected ? "removeClass" : "addClass"]('selected')// 注意這里不能用attr仔細(xì)一點(diǎn)你就會發(fā)現(xiàn)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>
?
轉(zhuǎn)載于:https://www.cnblogs.com/hu-bo/p/6598981.html
總結(jié)
以上是生活随笔為你收集整理的jquery表格复选框简单练习及prop(),attr()的应用原则的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring使用外部属性文件
- 下一篇： ajax 传递数组与接收