这里总结了jQuery中对表格和表单的一些常用操作, 通过这里的实例和操作肯定对jQuery的掌握有一个新得提高, 希望大家耐心看完, 多实践.
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; padding:0;border:none;} form {width:800px;margin:auto;margin-top:40px;} form legend { margin-bottom:5px; background: #eee; color:#363636; font-weight:bold; display: block; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; padding:8px 15px; } form div { margin-bottom:5px; } form input, form textarea{ border:1px solid #888;outline:none; border-radius:3px; } form input { width:174px;height:28px;line-height: 28px;padding:0 5px; } form textarea { width:480px;line-height: 20px; padding:5px; } form input.focus,form textarea.focus { border:1px solid #878; box-shadow: 0 0 4px rgba(3,3,3, 0.3); } form input[type="submit"], form input[type="reset"] { width:80px; margin-right:5px; cursor:pointer; } </style> </head> <body> <!-- 单行问本框应用 --> <form action=""> <fieldset> <legend>个人基本信息</legend> <div> <label for="username"> 名称:</label> <input type="text" value="" id="username" name="username" /> </div> <div> <label for="pwd"> 密码:</label> <input type="password" id="pwd" name="pwd" /> </div> <div> <label for="msg">详细信息:</label> <textarea name="msg" id="msg" cols="30" rows="10"></textarea> </div> </fieldset> </form> <script src="../jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // 需求 $("input,textarea").focus(function (){ $(this).addClass('focus'); }).blur(function () { $(this).removeClass('focus'); }) }) </script> <!-- 多行文本框应用 --> <style> .msg-caption { } .msg_caption span { display: inline-block;*display:inline;*zoom:1; height:26px;text-align: center; color:#363636; line-height: 26px; padding:0 15px; border:1px solid #dcdcdc; cursor: pointer; margin-right:5px; } .msg_caption span:last-child { margin-right:0; } .msg_caption span:hover, .msg_caption span.active{ background: maroon; color:#fff; border:1px solid maroon; } .demo2 textarea { height:100px; } </style> <form class="demo2" action=""> <legend>多行文本框应用</legend> <div class="msg_caption"> <span class="bigger">放大</span><span class="smaller">缩小</span><!-- --><span class="up">向上</span><span class="down">向下</span> </div> <textarea name="" id="msg2" cols="30" rows="10"></textarea> </form> <style> .demo3 div.dv1 input { width:0;height:0; width:15px;height:15px; display: inline-block;*display: inline;*zoom:1; vertical-align: middle; } .demo3 div.dv1 label { margin-right:35px; height:20px;line-height: 20px; font-size:12px; display: inline-block;*display: inline;*zoom:1; } .demo3 div.dv1 { margin-top:5px; } .demo3 div.dv2 input { width:60px; cursor:pointer; } </style> <form class="demo3" action=""> <legend>复选框的应用</legend> 你爱好的运动是 ?<br/> <div class="dv1"> <label for="items0"><input type="checkbox" id="items0" name="items" value="足 球" />足球</label><!-- --><label for="items1"><input type="checkbox" id="items1" name="items" value="篮 球" />篮球</label><!-- --><label for="items2"><input type="checkbox" id="items2" name="items" value="羽毛球" />羽毛球</label><!-- --><label for="items3"><input type="checkbox" id="items3" name="items" value="乒乓球" />乒乓球</label> </div> <div class="dv2"> <input type="button" value="全 选" id="checkAll" /> <input type="button" value="全不选" id="checkNone" /> <input type="button" value="反 选" id="checkReverse" /> <input type="button" value="提 交" id="sub_ckbtn" /> </div> </form> <script type="text/javascript"> $(function () { (function () { /* 1. 信息框高度的变化 */ var $bigger = $("span.bigger"); var $smaller = $("span.smaller"); var $msg = $("#msg2"); var $msgHeight = $msg.height(); $bigger.click(function () { var h = $msg.height(); if(h<300) { // $msg.height(h+50); if(!$msg.is(":animated")) { $msg.animate({"height":"+=50"}, "slow"); } } }) $smaller.click(function () { var h = $msg.height(); if(h>100) { // $msg.height(h-50); if(!$msg.is(":animated")) { $msg.animate({"height":"-=50"}, "slow"); } } }) /* 2. 信息框滚动条高度的变化 */ var $up = $("span.up"); var $down = $("span.down"); var $msgLineHeight = parseInt($msg.css('line-height').split('px')[0]); $down.click(function () { if(!$msg.is(":animated")) { $msg.animate({"scrollTop":"+="+($msgHeight-$msgLineHeight)}, "slow"); } }) $up.click(function (){ if(!$msg.is(":animated")) { $msg.animate({"scrollTop":"-="+($msgHeight-$msgLineHeight)}, "slow"); } }) /* 复选框操作 */ var $checkAll = $("#checkAll"); var $checkNone = $("#checkNone"); var $checkReverse = $("#checkReverse"); var $subCkBtn = $("#sub_ckbtn"); var $cks = $(".demo3 input[type=checkbox]"); $checkAll.click(function () { $cks.prop('checked',true); }) $checkNone.click(function() { $cks.removeProp('checked',false); }) $checkReverse.click(function () { // 反选采用原生 $cks.each(function () { this.checked = !this.checked; }) }) $subCkBtn.click(function () { var msg = "你爱好的运动是: "; var $cked = $(".demo3 input[type=checkbox]:checked"); $cked.each(function () { msg += $(this).val()+" "; }) alert(msg); }) }()); }) </script> <!-- 上例的变种 --> <style> .demo4 input[type="checkbox"] { width:0;height:0; width:15px;height:15px; display: inline-block;*display: inline;*zoom:1; vertical-align: middle; } .demo4 div.dv1 label { margin-right:35px; height:20px;line-height: 20px; font-size:12px; display: inline-block;*display: inline;*zoom:1; } .demo4 div.dv1 { margin-top:5px; } .demo4 div.dv2 input { width:60px; cursor:pointer; } </style> <form class="demo4" action=""> <legend>复选框的应用 例2</legend> 你爱好的运动是 ? <label for="checkAllOrNot"><input type="checkbox" id="checkAllOrNot" />全选/全不选</label><br/> <div class="dv1"> <label for="item_0"><input type="checkbox" id="item_0" name="item" value="足 球" />足球</label><!-- --><label for="item_1"><input type="checkbox" id="item_1" name="item" value="篮 球" />篮球</label><!-- --><label for="item_2"><input type="checkbox" id="item_2" name="item" value="羽毛球" />羽毛球</label><!-- --><label for="item_3"><input type="checkbox" id="item_3" name="item" value="乒乓球" />乒乓球</label> </div> <div class="dv2"> <input type="button" value="提 交" id="sub_ckbtn2" /> </div> </form> <script type="text/javascript"> $(function () { (function (){ var $ckAll = $("#checkAllOrNot"); var $cks = $(".demo4 [name=item]"); $ckAll.click(function () { $(".demo4 [name=item]").prop('checked', this.checked); }) $cks.click(function () {// 当复选框没有全部选中时, 取消全选. $tmpChecked = $(".demo4 [name=item]:checked"); $ckAll.prop('checked', $cks.length == $tmpChecked.length); }) }()) }) </script> <style> .content { width:800px;margin:auto; margin-top:15px; } .h3 { background: #eee; color:#363636; font-weight:bold; display: block; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; padding:8px 15px; font-size:13px; width:800px; margin:auto; margin-top:25px;margin-bottom:5px; } #select1 { width:114px;height:160px; border:1px solid #565656; padding:5px;margin-right:105px; } #select2 { width:114px;height:160px; border:1px solid #565656; padding:5px; } .fbox { width:114px; display: inline-block;*display: inline;*zoom:1; } .fbox:first-child { margin-right:105px; } .fwrap { } .u-btn { display: inline-block;*display: inline;*zoom:1; width:114px; background: #464646; color:#fff; height:26px;line-height: 26px; cursor:pointer; margin-right: 5px; text-align: center; margin-top:3px; } .u-btn:hover { background: maroon;color:#fff; } </style> <div class="content"> <h3 class="h3">下拉框应用</h3> <div> <select multiple name="" id="select1"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> <option value="6">选项6</option> <option value="7">选项7</option> <option value="8">选项8</option> </select><!-- --><select multiple name="" id="select2"> </select> </div> <div class="fwrap"> <div class="fbox"> <span class="add u-btn">选中添加到右边>></span><span class="add_all u-btn">全部添加到右边>></span> </div><!-- --><div class="fbox"> <span class="remove u-btn"><<选中添加到左边</span><span class="remove_all u-btn"><<全部添加到左边</span> </div> </div> </div> <script type="text/javascript"> $(function () { (function (){ var $slc1 = $("#select1"); var $slc2 = $("#select2"); var $add = $(".add"); var $add_all = $(".add_all"); $add.click(function () { // 左边的添加到右边 // 获取选中的选项 var $selected = $slc1.find('option:selected'); if($selected.length<=0) { alert('请选择要移动的选项'); } $selected.appendTo($slc2);//删除且追加操作 appendTo }) $add_all.click(function () { // 将左边所有添加到右边 $slc1.find("option").appendTo($slc2); }) var $remove = $(".remove"); var $remove_all = $(".remove_all"); $remove.click(function () { var $selected = $slc2.find("option:selected"); if($selected.length<=0) { alert("请选择要移动的选项"); } $selected.appendTo($slc1); }) $remove_all.click(function () { var $selected = $slc2.find("option"); $selected.appendTo($slc1); }) //双击某个选项, 添加给对方 $slc1.dblclick(function () { // 将选中的选项添加给对方 var $options = $("option:selected"); $options.appendTo($slc2); }) $slc2.dblclick(function () { // 将选中的选项添加给对方 var options = $("option:selected"); options.appendTo($slc1); }) }()) }) </script> <!-- ///////////////////////////// 表单验证 //////////////////////////// --> <style> .highlight { color:red; font-style:normal; font-weight: normal; } .formtips.onError { color:red; } .formtips.onSuccess { color:green; } #form_validate textarea { width:400px; } </style> <form id="form_validate" class="form_validate" method="post" action=""> <legend>表单验证</legend> <div class="int"> <label for="username"> 用户名: </label><input type="text" id="username" class="required" /> </div> <div class="int"> <label for=""> 邮箱: </label><input type="text" id="email" class="required" /> </div> <div class="int"> <label for="">个人资料: </label><input type="text" id="personalinfo" /> </div> <div class="int"> <label for="info">详细介绍: </label><textarea class="required" name="info" id="info" cols="30" rows="10"></textarea> </div> <div class="sub"> <input type="submit" value="提交" id="send" /><input type="reset" id="res" value="重置" /> </div> </form> <script type="text/javascript"> $(function () { (function (){ var form = $("#form_validate"); // 有required类的元素是必填项 var $required = "<strong class='highlight'>*</strong> "; form.find(".required").parent().append($required); form.find(":input").blur(function () { var $parent = $(this).parent(); // 验证用户名 if($(this).is("#username")) { $parent.find(".formtips").remove(); if(this.value == "" || this.value.length<6) { var errorMsg = "请输入至少6位字符的用户名"; $parent.append("<span class='formtips onError'>"+errorMsg+"</span>"); } else { var okMsg = '输入正确'; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); } } // 验证邮箱 if($(this).is("#email")) { $parent.find(".formtips").remove(); if(this.value == '' || (this.value!="" && !/^.+@.+.[a-zA-Z]{2,4}$/.test(this.value))) { var errorMsg = "请输入正确的邮箱地址"; $parent.append("<span class='formtips onError'>"+errorMsg+"</span>"); } else { var okMsg = "输入正确"; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); } } return false; }).keyup(function() { $(this).triggerHandler('blur'); }).focus(function() { $(this).triggerHandler('blur'); }) $("#send").click(function() { $("form .required:input").trigger('click'); var errorCount = form.find(".onError").length; if(errorCount>0) { return false; } alert('注册成功, 密码已发到你的邮箱, 请查收'); return false; }) }()) }) </script> <!-- \\\\\\\\\\\\\\ 表单验证 \\\\\\\\\\\\\\\ --> <!-- 表格应用 --> <style> table { border-collapse: collapse; border-radius: 5px; width:800px; margin:auto; border:1px solid #454545; border-width:1px 0 0 1px; } table th, table td { border-collapse: collapse; border:1px solid #454545; height:30px;line-height: 30px; padding:0 5px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; font-size: 12px; } table th { padding:5px 5px; text-align: center; font-size:16px; } .odd-color { background: #f4f4f4; } .even-color { background: beige; } .highlight-color {/*高亮放后才有效果*/ background: maroon; color:#fff; } table { margin-top:15px; } </style> <!-- 表格变色 --> <h3 class="h3">单选框控制表格高亮</h3> <table class="cl-tb"> <thead> <tr><th width="25"></th><th>姓名</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input checked="checked" type="radio" name="list" /></td><td>圆通</td><td>浙江宁波</td></tr> <tr><td><input type="radio" name="list" /></td><td>中通</td><td>浙江杭州</td></tr> <tr><td><input type="radio" name="list" /></td><td>顺丰</td><td>江苏苏州</td></tr> <tr><td><input type="radio" name="list" /></td><td>天天</td><td>北京</td></tr> </tbody> </table> <h3 class="h3">复选框控制表格高亮</h3> <table class="cl-tb"> <thead> <tr><th width="25"></th><th>姓名</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input checked="checked" type="checkbox" name="cklist" /></td><td>圆通</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" name="cklist" /></td><td>中通</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="cklist" /></td><td>顺丰</td><td>江苏苏州</td></tr> <tr><td><input type="checkbox" name="cklist" /></td><td>天天</td><td>北京</td></tr> </tbody> </table> <style> table .parent { background: #555; color:#fff; border:1px solid #555; font-size:12px; font-weight:bold; cursor:pointer; } table .parent.close { background: #f3f3f3; color:#777; border:1px solid #888; border-left:none; border-right:none; } table.cl-tb.m1 { border:none; border:1px solid #888; border-right:none; border-left:none; padding:5px; } table.cl-tb.m1 td { border:none; border-left:none; border-right:none; font-size:12px; } table.cl-tb.m1 th { border:none; border-bottom:2px solid #000; background: #f4f4f4; color:maroon; text-align: left; } .mgb35 { margin-bottom: 45px; } table.cl-tb.m1 tbody tr.wtline td{ border-bottom: 1px solid #fff; height:2px; } table.cl-tb.m1 tbody tr.highlight-color { background: beige; color:maroon; } </style> <h3 class="h3">表格展开和关闭</h3> <table id="cltbm1" class="cl-tb m1"> <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 highlight-color"><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>小汪</td><td>女</td><td>甘肃兰州</td></tr> <tr class="child_row_03"><td>大侠</td><td>男</td><td>美国华盛顿</td></tr> </tbody> </table> <h3 class="h3">这里添加内容筛选的行(该行高亮显示)</h3> <table id="apttb"></table> <style> .input-box { width:800px; margin:auto; } #ipt-filter{ height:30px;width:250px;line-height: 30px; border:1px solid #888; padding:0 5px;outline: none; } #ipt-filter:focus { box-shadow: 0 0 4px rgba(3,3,3,0.3); } </style> <h3 class="h3">根据用户输入的内容来筛选表格</h3> <div class="input-box"> <input type="text" placeholder="请输入搜索内容" value="" id="ipt-filter" /> </div> <table id="cltbm2" class="cl-tb m1"> <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>小汪</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>请输入搜索内容</td><td>女</td><td>加拿大多伦多</td></tr> <tr><td>洪七公</td><td>男</td><td>丐帮</td></tr> </tbody> </table> <div class="mgb35"></div> <script type="text/javascript"> $(function () { // 隔行变色 $(".cl-tb:lt(2)").find("tbody>tr").filter(":odd").addClass('odd-color').end().filter(':even').addClass('even-color'); // $(".cl-tb").find("tbody>tr").filter(":eq(3)").addClass('highlight-color');//高亮 // 页面初始化, 如果有单选框被选中, 或者复选框时选中的, 则对应的一行tr高亮 $("tbody>tr:has(':checked')").addClass('highlight-color'); // 单选框控制表格行高亮 $(".cl-tb").eq(0).find("tbody>tr").click(function () { $(this).addClass("highlight-color").find("[name=list]").prop('checked',true).end().siblings("tr").removeClass("highlight-color").find("[name=list]").prop('checked',false); }) //复选框控制表格高亮 $(".cl-tb").eq(1).find("tbody>tr").click(function () { // !$(this).hasClass('highlight-color') ? // $(this).addClass('highlight-color').find("[name=cklist]").prop('checked',true) // :$(this).removeClass('highlight-color').find("[name=cklist]").prop('checked',false); // 精简写法 var hasSelected = $(this).hasClass('highlight-color'); $(this)[!hasSelected?"addClass":"removeClass"]("highlight-color").find("[name=cklist]").prop("checked",!hasSelected); }) // 单机父行, 相应的子行收缩 $("#cltbm1 tbody>tr.parent").each(function (i) { $(this).click(function () { $(this).toggleClass('close').siblings(".child_"+this.id).toggle(); }).click(); }) // 表格内容筛选 // 筛选内容中含有"小"的文本的行, 给该行加高亮 var cln_tr = $("#cltbm1 tbody>tr:contains('大')").clone(true); $("#apttb").append(cln_tr.show().addClass('highlight-color')); // // 具有 placeholder 属性的 (*1*) // $("[placeholder]").each(function () { // var placeholder = $(this).attr('placeholder'); // $(this).val(placeholder).focus(function () { // if(this.value == this.placeholder) { // $(this).val(''); // } // }).blur(function () { // if(this.value == '' || this.value==placeholder) { // $(this).val(placeholder); // } // }); // }); // 输入内容筛选对应表格 ***** $("#ipt-filter").keyup(function (){ $("#cltbm2 tbody>tr").hide().filter("#cltbm2 tbody>tr:contains('"+$(this).val()+"')").show(); }).keyup();// 但是表单元素的特点是刷新元素其值保持不变-----如果用jquery提前控制了搜索中focus事件除外, 如: (*1*) }) </script> <style> .h-msg { width:800px; margin:auto; } .h-msg p{ line-height: 1.5em; font-size: 12px; padding:10px 0; } </style> <h3 class="h3">改变网页字体的大小</h3> <div id="Hmsg" class="h-msg"> <div class="msg_caption"> <span class="zm_bigger">放大</span><span class="zm_smaller">缩小</span> </div> <div> <p id="para">PHP原始为Personal Home Page的缩写，已经正式更名为 "PHP: Hypertext Preprocessor"。注意不是“Hypertext Preprocessor”的缩写，这种将名称放到定义中的写法被称作递归缩写。PHP于1994年由Rasmus Lerdorf创建，刚刚开始是Rasmus Lerdorf为了要维护个人网页而制作的一个简单的用Perl语言编写的程序。这些工具程序用来显示 Rasmus Lerdorf 的个人履历，以及统计网页流量。后来又用C语言重新编写，包括可以访问数据库。他将这些程序和一些表单直译器整合起来，称为 PHP/FI。PHP/FI 可以和数据库连接，产生简单的动态网页程序。<br/><br/> 在1995年以Personal Home Page Tools (PHP Tools) 开始对外发表第一个版本，Lerdorf写了一些介绍此程序的文档。并且发布了PHP1.0！在这的版本中，提供了访客留言本、访客计数器等简单的功能。以后越来越多的网站使用了PHP，并且强烈要求增加一些特性。比如循环语句和数组变量等等；在新的成员加入开发行列之后，Rasmus Lerdorf 在1995年6月8日将 PHP/FI 公开发布，希望可以透过社群来加速程序开发与寻找错误。这个发布的版本命名为 PHP 2，已经有 PHP 的一些雏型，像是类似 Perl的变量命名方式、表单处理功能、以及嵌入到 HTML 中执行的能力。程序语法上也类似 Perl，有较多的限制，不过更简单、更有弹性。PHP/FI加入了对MySQL的支持，从此建立了PHP在动态网页开发上的地位。到了1996年底，有15000个网站使用 PHP/FI。</p> </div> </div> <script type="text/javascript"> $(function () { (function () { var $sp = $("#Hmsg .msg_caption span"); var $p = $("#para"); $sp.click(function () { var $fontSize = parseInt($p.css("font-size")); if($(this).attr('class') == 'zm_bigger') { $fontSizeUnit = "+=2"; } else { $fontSizeUnit = "-=2"; } $p.css("font-size", $fontSizeUnit); }); }()) }) </script> <style> .tab {width:800px;margin:auto;} .tab .tab_menu { height:30px; } .tab .tab_menu li { border: 1px solid #dcdcdc; float: left; height:30px; font-size:14px; line-height: 30px; margin-right:4px; list-style:none; padding:0 15px; } .tab .tab_menu li.active,.tab .tab_menu li:hover { background: #f4f4f4; color:maroon; cursor:pointer; border-color:#f4f4f4; } .tab .tab_box div { width:400px; height:150px; font-size: 12px; line-height: 1.5em; border:1px solid #dcdcdc; padding:5px; } .tab .tab_box div.hide { display: none; } .tab .tab_box { word-break:break-all; letter-spacing: 1px; word-spacing: normal; word-wrap: break-word; margin-top:4px; clear:both; } </style> <h3 class="h3">网页选项卡</h3> <div class="tab"> <div class="tab_menu"> <ul> <li class="active">时事</li> <li>体育</li> <li>娱乐</li> </ul> </div> <div class="tab_box"> <div>时事</div> <div class="hide">体育</div> <div class="hide">娱乐</div> </div> </div> <script type="text/javascript"> $(function () { (function () { var $tab_menu = $(".tab>.tab_menu>ul>li"); $tab_menu.mouseover(function () { $(this).addClass('active').siblings('li').removeClass('active').parents(".tab").find(".tab_box>div").eq($(this).index()).removeClass('hide').siblings("div").addClass('hide'); }) }()) }) </script> </body> </html>
复制上面的代码, 将其存储为html文件, 然后打开, 根据实例和效果学习.