首页 > 代码库 > 第七章 jQuery操作表格及其它应用
第七章 jQuery操作表格及其它应用
1.表格变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title><link href=http://www.mamicode.com/"css/style.css" rel="stylesheet" type="text/css" /><!-- 引入jQuery --><script src=http://www.mamicode.com/"../scripts/jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式 $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式 $(‘tbody>tr‘).click(function() { $(this) .addClass(‘selected‘) .siblings().removeClass(‘selected‘) .end() .find(‘:radio‘).attr(‘checked‘,true); }); // 如果单选框默认情况下是选择的，则高色. // $(‘table :radio:checked‘).parent().parent().addClass(‘selected‘); //简化: $(‘table :radio:checked‘).parents("tr").addClass(‘selected‘); //再简化: //$(‘tbody>tr:has(:checked)‘).addClass(‘selected‘); })</script></head><body> <table> <thead> <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input type="radio" name="choice" value=http://www.mamicode.com/""/></td> <td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="radio" name="choice" value=http://www.mamicode.com/"" /></td> <td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr><td><input type="radio" name="choice" value=http://www.mamicode.com/"" checked=‘checked‘ /></td> <td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr><td><input type="radio" name="choice" value=http://www.mamicode.com/"" /></td> <td>找六</td><td>男</td><td>浙江温州</td></tr> <tr><td><input type="radio" name="choice" value=http://www.mamicode.com/"" /></td> <td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="radio" name="choice" value=http://www.mamicode.com/"" /></td> <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title><link href=http://www.mamicode.com/"css/style.css" rel="stylesheet" type="text/css" /><!-- 引入jQuery --><script src=http://www.mamicode.com/"../scripts/jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式 $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式 $(‘tbody>tr‘).click(function() { if ($(this).hasClass(‘selected‘)) { $(this) .removeClass(‘selected‘) .find(‘:checkbox‘).attr(‘checked‘,false); }else{ $(this) .addClass(‘selected‘) .find(‘:checkbox‘).attr(‘checked‘,true); } }); // 如果复选框默认情况下是选择的，则高色. // $(‘table :checkbox:checked‘).parent().parent().addClass(‘selected‘); //简化: $(‘table :checkbox:checked‘).parents("tr").addClass(‘selected‘); //$(‘tbody>tr:has(:checked)‘).addClass(‘selected‘); })</script></head><body> <table> <thead> <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input type="checkbox" name="choice" value=http://www.mamicode.com/""/></td> <td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" name="choice" value=http://www.mamicode.com/"" /></td> <td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="choice" value=http://www.mamicode.com/"" checked=‘checked‘ /></td> <td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr><td><input type="checkbox" name="choice" value=http://www.mamicode.com/"" /></td> <td>找六</td><td>男</td><td>浙江温州</td></tr> <tr><td><input type="checkbox" name="choice" value=http://www.mamicode.com/"" /></td> <td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="choice" value=http://www.mamicode.com/"" /></td> <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title><link href=http://www.mamicode.com/"css/style.css" rel="stylesheet" type="text/css" /><!-- 引入jQuery --><script src=http://www.mamicode.com/"../scripts/jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("tbody>tr:odd").addClass("odd"); $("tbody>tr:even").addClass("even"); $(‘tbody>tr‘).click(function() { //判断当前是否选中 var hasSelected=$(this).hasClass(‘selected‘); //如果选中，则移出selected类，否则就加上selected类 $(this)[hasSelected?"removeClass":"addClass"](‘selected‘) //查找内部的checkbox,设置对应的属性。 .find(‘:checkbox‘).attr(‘checked‘,!hasSelected); }); // 如果复选框默认情况下是选择的，则高色. $(‘tbody>tr:has(:checked)‘).addClass(‘selected‘); })</script></head><body> <table> <thead> <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input type="checkbox" name="choice" value=http://www.mamicode.com/""/></td> <td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" name="choice" value=http://www.mamicode.com/"" /></td> <td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="choice" value=http://www.mamicode.com/"" checked=‘checked‘ /></td> <td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr><td><input type="checkbox" name="choice" value=http://www.mamicode.com/"" /></td> <td>找六</td><td>男</td><td>浙江温州</td></tr> <tr><td><input type="checkbox" name="choice" value=http://www.mamicode.com/"" /></td> <td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="choice" value=http://www.mamicode.com/"" /></td> <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table></body></html>
2.表格展开收缩
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title><link href=http://www.mamicode.com/"css/style.css" rel="stylesheet" type="text/css" /><!-- 引入jQuery --><script src=http://www.mamicode.com/"../scripts/jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript">$(function(){ $(‘tr.parent‘).click(function(){ // 获取所谓的父行 $(this) .toggleClass("selected") // 添加/删除高亮 .siblings(‘.child_‘+this.id).toggle(); // 隐藏/显示所谓的子行 });})</script></head><body> <table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr> <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr> <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr> <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr> <tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title><link href=http://www.mamicode.com/"css/style.css" rel="stylesheet" type="text/css" /><!-- 引入jQuery --><script src=http://www.mamicode.com/"../scripts/jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript">$(function(){ $(‘tr.parent‘).click(function(){ // 获取所谓的父行 $(this) .toggleClass("selected") // 添加/删除高亮 .siblings(‘.child_‘+this.id).toggle(); // 隐藏/显示所谓的子行 }).click();})</script></head><body> <table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr> <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr> <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr> <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr> <tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table></body></html>
3.表格内容过滤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title><link href=http://www.mamicode.com/"css/style.css" rel="stylesheet" type="text/css" /><!-- 引入jQuery --><script src=http://www.mamicode.com/"../scripts/jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("#filterName").keyup(function(){ $("table tbody tr") .hide() .filter(":contains(‘"+( $(this).val() )+"‘)") .show(); }).keyup(); })</script></head><body><div><br/>筛选：<input id="filterName" /><br/></div><table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr><td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr><td>找六</td><td>男</td><td>浙江温州</td></tr> <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> <tr><td>王六</td><td>男</td><td>浙江杭州</td></tr> <tr><td>李字</td><td>女</td><td>浙江杭州</td></tr> <tr><td>李四</td><td>男</td><td>湖南长沙</td></tr> </tbody></table></body></html>
4.控制字体大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link href=http://www.mamicode.com/"css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src=http://www.mamicode.com/"../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("span").click(function(){ var thisEle = $("#para").css("font-size"); var textFontSize = parseFloat(thisEle , 10); var unit = thisEle.slice(-2); //获取单位 var cName = $(this).attr("class"); if(cName == "bigger"){ if( textFontSize <= 22 ){ textFontSize += 2; } }else if(cName == "smaller"){ if( textFontSize >= 12 ){ textFontSize -= 2; } } $("#para").css("font-size", textFontSize + unit); }); }); </script></head><body><div class="msg"> <div class="msg_caption"> <span class="bigger" >放大</span> <span class="smaller" >缩小</span> </div> <div> <p id="para"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div></div></body></html>
5.选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><link href=http://www.mamicode.com/"css/style.css" rel="stylesheet" type="text/css" /><!-- 引入jQuery --><script src=http://www.mamicode.com/"../scripts/jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript" >//<![CDATA[ $(function(){ var $div_li =$("div.tab_menu ul li"); $div_li.click(function(){ $(this).addClass("selected") //当前<li>元素高亮 .siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮 var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。 $("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div .eq(index).show() //显示 <li>元素对应的<div>元素 .siblings().hide(); //隐藏其它几个同辈的<div>元素 }).hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }) })//]]></script></head><body><div class="tab"> <div class="tab_menu"> <ul> <li class="selected">时事</li> <li>体育</li> <li>娱乐</li> </ul> </div> <div class="tab_box"> <div>时事</div> <div class="hide">体育</div> <div class="hide">娱乐</div> </div></div></body></html>
6.换肤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title></title> <link href=http://www.mamicode.com/"css/default.css" rel="stylesheet" type="text/css" /> <link href=http://www.mamicode.com/"css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" /> <!-- 引入jQuery --> <script src=http://www.mamicode.com/"../scripts/jquery-1.3.1.js" type="text/javascript"></script> <!-- 引入jQuery的cookie插件 --> <script src=http://www.mamicode.com/"js/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li =$("#skin li"); $li.click(function(){ switchSkin( this.id ); }); var cookie_skin = $.cookie( "MyCssSkin"); if (cookie_skin) { switchSkin( cookie_skin ); } }); function switchSkin(skinName){ $("#"+skinName).addClass("selected") //当前<li>元素选中 .siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中 $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤 $.cookie( "MyCssSkin" , skinName , { path: ‘/‘, expires: 10 }); } //]]> </script></head><body> <ul id="skin"> <li id="skin_0" title="灰色" class="selected">灰色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="红色">红色</li> <li id="skin_3" title="天蓝色">天蓝色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡绿色">淡绿色</li> </ul> <div id="div_side_0"> <div id="news"> <h1 class="title">时事新闻</h1> </div> </div> <div id="div_side_1"> <div id="game"> <h1 class="title">娱乐新闻</h1> </div> </div> </body></html>
PS:参考文献《锋利的jQuery》
第七章 jQuery操作表格及其它应用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。