jquery的列表 jquery操作表格

转载

编程小达 2024-07-24 09:46:06

文章标签 jquery的列表 xhtml javascript ViewUI html 文章分类 jQuery 前端开发

1.表格变色

jquery的列表 jquery操作表格_javascript

jquery的列表 jquery操作表格_ViewUI_02

<!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="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../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=""/></td> <td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="radio" name="choice" value="" /></td> <td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr><td><input type="radio" name="choice" value="" checked='checked' /></td> <td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr><td><input type="radio" name="choice" value="" /></td> <td>找六</td><td>男</td><td>浙江温州</td></tr> <tr><td><input type="radio" name="choice" value="" /></td> <td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="radio" name="choice" value="" /></td> <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table> </body> </html>

jquery的列表 jquery操作表格_ViewUI_02

jquery的列表 jquery操作表格_javascript

jquery的列表 jquery操作表格_ViewUI_02

<!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="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../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=""/></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>

jquery的列表 jquery操作表格_ViewUI_02

<!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="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../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=""/></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>

jquery的列表 jquery操作表格_ViewUI_02

　　2.表格展开收缩

jquery的列表 jquery操作表格_javascript

jquery的列表 jquery操作表格_ViewUI_02

<!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="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../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>

jquery的列表 jquery操作表格_ViewUI_02

<!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="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../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>

jquery的列表 jquery操作表格_ViewUI_02

　　3.表格内容过滤

jquery的列表 jquery操作表格_ViewUI_02

<!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="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../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>

jquery的列表 jquery操作表格_ViewUI_02

　　4.控制字体大小

jquery的列表 jquery操作表格_ViewUI_02

<!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="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../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>

jquery的列表 jquery操作表格_ViewUI_02

　　5.选项卡

jquery的列表 jquery操作表格_ViewUI_02

<!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="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../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>

jquery的列表 jquery操作表格_ViewUI_02

　　6.换肤

jquery的列表 jquery操作表格_ViewUI_02

<!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="css/default.css" rel="stylesheet" type="text/css" /> <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" /> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <!-- 引入jQuery的cookie插件 --> <script src="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>

jquery的列表 jquery操作表格_ViewUI_02

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。