5.2jquery案例2
生活随笔
收集整理的這篇文章主要介紹了
5.2jquery案例2
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.仿qq列表分組
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>好友列表</title> <style type="text/css"> body{font-family: "微軟雅黑"; } table {border:#0099FF 1px solid;width:100px;border-collapse:collapse;margin:15px 10px;width:10%; }table td{border:#0066FF 1px solid;background-color:#6f5f3e;text-align:center;padding: 5px 0px; }table td div {background-color:#FFFF99;text-align:left;line-height: 24px;padding-left: 14px; }table td a:link, table td a:visited {color:#00ffFF;text-decoration:none; }table td a:hover {color:#00CC00; } /* 使用display屬性:如果取值為none就是隱藏標簽。 */ table td div { display:none; }.open { display:block; }.close { display:none; } </style> <!--引入jquery的js庫--> <script src="../js/jquery-1.4.2.js"></script> <script type="text/javascript">/* --通過jQuery實現訪QQ列表好友分組-- */function openDiv(thisobj){//1.隱藏其他行的div//1.1把thisobj的js對象轉成jquery對象//獲取a標簽的祖先tr，通過祖先tr找到其他行(tr) 找到每行的div并隱藏 $(thisobj).parents("tr").siblings("tr").find("div").hide();//2.當前行的div切換成顯示狀態//找到點擊a標簽下面的div 改變狀態 $(thisobj).next().toggle();}/* --通過js實現訪QQ列表好友分組--function openDiv(thisobj){var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];var aDiv = document.getElementsByTagName("div");//判斷當前分組div是展開還是關閉if(oDiv.style.display == "block"){//如果當前div是打開的, 只需關閉該div即可oDiv.style.display = "none";}else{//如果當前div是關閉的, 先關閉其他分組的div, 再打開當前的 for(var i=0;i<aDiv.length; i++){aDiv[i].style.display = "none";}oDiv.style.display = "block";}}*/ </script> </head> <body> <table><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a><div>秦始皇<br />劉邦<br />李世民<br />康熙<br /></div></td></tr><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">三國好友</a><div>劉備<br />關羽<br />張飛<br />趙云<br /></div></td></tr><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a><div>西施<br />貂蟬<br />楊貴妃<br />王昭君<br /></div></td></tr><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a><div>馬云<br />李開復<br />俞敏洪<br />黎活明<br /></div></td></tr> </table> </body> </html>2.二級聯動下拉框
?
?
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>二級聯動下拉框</title> <!--引入jquery的js庫--> <script src="../js/jquery-1.4.2.js"></script> <script>var data = {"北京市": ["海淀區","朝陽區","豐臺區"],"河北省": ["石家莊","唐山","秦皇島"],"遼寧省": ["沈陽","大連","鞍山"],"山東省": ["青島","濟南","煙臺"]}/* --通過jQuery實現二級聯動下拉框 -- */function selectCity(thisobj){//獲取省市信息var province = $("#province").val();//根據省市信息獲取對應城市信息var citys = data[province];//清空 $("#city").html("<option>--請選擇--</option>")for(var i=0;i<citys.length;i++){$("#city").append("<option>"+citys[i]+"</option>")}}/* --通過js實現二級聯動下拉框--function selectCity(thisobj){//獲取用戶選中的省份var prov = thisobj.value;//再根據省份獲取對應的市區var citys = data[prov];//獲取第二個下拉列表var oCitySele = document.getElementById("city");//清空之前的數據oCitySele.innerHTML = "<option>--選擇城市--</option>";//循環遍歷, 將每一個城市依次填充到第二個下拉列表中for(var i=0; i<citys.length; i++){var oOption = document.createElement("option");oOption.innerHTML = citys[i];//將option掛載到select上oCitySele.appendChild(oOption);}}*/ </script> <!-- js實現注意問題: ie10以下的瀏覽器不支持 select,table上的innerHTML屬性刪除option時，由于刪除后，options長度發生了變化，所以直接用for循環會有漏刪的情況，可以由后向前刪除，可以避免這樣的問題 --> </head><body><select name="country" onchange="getCountry()" ><option value="none">--選擇國家--</option><option value="中國">中國</option><option value="美國">美國</option><option value="日本">日本</option></select><br><br><hr/><br><div id="seleDiv"><select id="province" onchange="selectCity(this)"><option>--選擇省市--</option><option>北京市</option><option>河北省</option><option>遼寧省</option><option>山東省</option></select><span id="citySpan"><select id="city"><option>--選擇城市--</option></select></span></div> </body></html>?3.模擬員工信息管理系統
<!DOCTYPE HTML> <html> <head> <title>table練習</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css">body{font-family: "微軟雅黑"}h2, h4{ text-align: center; }div#box1, div#box2 {text-align:center;}hr{margin: 20px 0;}table{ margin: 0 auto; width: 70%;text-align: center;border-collapse:collapse;}td, th{padding: 7px; width:20%;}th{background-color: #DCDCDC;} </style><!--引入jquery的js庫--> <script src="../js/jquery-1.4.2.js"></script> <script type="text/javascript">//html文檔加載完執行 $(function(){//為"添加"按鈕綁定點擊事件(點擊按鈕添加員工信息到table中) $("#add").click(function(){//獲取輸入員工信息////采用后代選擇器 $.trim的作用是取出輸入的前后空格var id = $.trim($("#box1 input[name='id']").val()); var name = $.trim($("#box1 input[name='name']").val());var email = $.trim($("#box1 input[name='email']").val()); var salary = $.trim($("#box1 input[name='salary']").val());// 校驗員工信息//員工信息不能為空if(id == "" || name == "" || email == "" || salary == ""){alert("員工信息不能為空");return;}//員工id不能重復var flag = false;$("table tr").each(function(){//判斷id是否等于每行第二個td內的文本, 即idif($(this).find("td:eq(1)").text() == id){alert("ID已存在！");flag = true;return false;}});if(flag){ //如果id相等 ，中斷該程序return;}//將新員工的信息插入到員工列表中var $tab = $("table"); //元素名選擇器var $tr = $("<tr></tr>"); //$tr 沒有什么意思只是為了做區分他是jquery對象，是一個標記var $td0 = $("<td><input type='checkbox'></td>");var $td1 = $("<td>"+id+"</td>");var $td2 = $("<td>"+name+"</td>");var $td3 = $("<td>"+email+"</td>");var $td4 = $("<td>"+salary+"</td>");//將td與tr拼接 $tr.append($td0).append($td1).append($td2).append($td3).append($td4);$tab.append($tr);});//為全選按鈕綁定點擊事件 $("#all").click(function(){//獲取全選狀態var check = $(this).attr("checked");//將所有復選框狀態與全選保持一致 $("table input[type='checkbox']").attr("checked",check);});//為"刪除"綁定點擊事件(點擊"刪除",刪除所選員工信息) $("#del").click(function(){$("input:checked:not(input[id='all'])").parents("tr").remove();});//為"修改"綁定點擊事件(點擊"修改",修改指定ID的員工信息) $("#upd").click(function(){//獲取修改的員工信息var id = $.trim($("#box2 input[name='id']").val()); var name = $.trim($("#box2 input[name='name']").val());var email = $.trim($("#box2 input[name='email']").val()); var salary = $.trim($("#box2 input[name='salary']").val());//修改員工信息不能為空 if(id == "" || name == "" || email == "" || salary == ""){alert("修改的信息不能為空!");return;}//根據ID修改對應的信息var flag = false;$("table tr").each(function(){//判斷id是否等于每行第二個td內的文本, 即idif($(this).find("td:eq(1)").text() == id){//進行修改 $(this).find("td:eq(2)").text(name);$(this).find("td:eq(3)").text(email);$(this).find("td:eq(4)").text(salary);flag = true;return true;}})if(!flag){alert("修改的員工ID不存在！");}});})</script> </head><body><h2>添加新員工</h2><div id="box1">ID：<input type="text" name="id"/>姓名：<input type="text" name="name"/>郵箱：<input type="text" name="email"/>工資：<input type="text" name="salary"/><input type="button" id="add" value="添加"/></div><hr/><table border="1"><tr><th><input type="checkbox" id="all"/><!--全選--></th><th>ID</th><th>姓名</th><th>郵箱</th><th>工資</th></tr><tr><td><input type="checkbox"/></td><td>1</td><td>宋江</td><td>sj@163.com</td><td>12000</td></tr><tr><td><input type="checkbox"/></td><td>2</td><td>武松</td><td>ws@163.com</td><td>10500</td></tr><tr><td><input type="checkbox"/></td><td>3</td><td>孫二娘</td><td>sen@163.com</td><td>11000</td></tr></table><h4><a href="#" id="del">刪除選中</a></h2><hr/><div id="box2">ID：<input type="text" name="id"/>姓名：<input type="text" name="name"/>郵箱：<input type="text" name="email"/>工資：<input type="text" name="salary"/><input type="button" id="upd" value="修改"/></div> </body> </html>?
轉載于:https://www.cnblogs.com/xuwangqi/p/11294424.html
總結
以上是生活随笔為你收集整理的5.2jquery案例2的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： double类型计算
- 下一篇： 【Android开发】NDK开发（3）-