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>
