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内的文本, 即id if($(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内的文本, 即id if($(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>