jQuery實現的3個基礎案例（仿QQ列表分組，二級聯動下拉框，模擬員工信息管理系統）

本文轉載自查看原文 2019-04-06 21:53 546

1.仿QQ列表分組

<!DOCTYPE HTML>

<html>

<head>

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; }

</style>

/* --通過jQuery實現訪QQ列表好友分組-- */

function openDiv(thisobj){

//1.關閉其他行的div

$(thisobj).parents("tr").siblings().find("div").hide();

//2.展開或關閉點擊a標簽的兄弟div

$(thisobj).next().toggle();

}

/*//thisobj --> 被點擊的A標簽

//在顯示當前div之前, 先隱藏其他div

$(thisobj).parents("tr").siblings().find("div").hide();

$(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>

<div>

劉備<br />

關羽<br />

張飛<br />

趙雲<br />

</div>

</td>

</tr>

<tr>

<td>

<div>

西施<br />

貂蟬<br />

楊貴妃<br />

王昭君<br />

</div>

</td>

</tr>

<tr>

<td>

<div>

馬雲<br />

李開復<br />

俞敏洪<br />

黎活明<br />

</div>

</td>

</tr>

</table>

</body>

</html>

2.二級聯動下拉框

<!DOCTYPE HTML>

<html>

<head>

<title>二級聯動下拉框</title>

var data = {

"北京市": ["海淀區","朝陽區","豐台區"],

"河北省": ["石家庄","唐山","秦皇島"],

"遼寧省": ["沈陽","大連","鞍山"],

"山東省": ["青島","濟南","煙台"]

}

/* --通過jQuery實現二級聯動下拉框 -- */

function selectCity(thisobj){

//thisobj是第一個下拉框選中的option對象

var province = $(thisobj).val();

var cities = data[province];

//添加數據前先清空一次下拉框

$("#city").html("");

//循環添加城市信息

//獲取第二個下拉框，在其中添加城市信息

for(var i=0;i<cities.length;i++){

$("#city").append("<option>"+cities[i]+"</option>")

}

/*//獲取用戶選中的省份

var prov = $(thisobj).val();

//獲取省份對應的市區數據

var citys = data[prov];

//先清空之前的數據

$("#city").html("<option>--選擇城市--</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>";

var opts = oCitySele.getElementsByTagName("option");

var len = opts.length;

for(var i=1; i< len; i++){

oCitySele.removeChild(opts[1]);

}

//循環遍歷, 將每一個城市依次填充到第二個下拉列表中

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>

<hr/>

<br>

</select>

</select>

</span>

</div>

</body>

</html>

3.模擬員工信息管理系統

<!DOCTYPE HTML>

<html>

<head>

<title>table練習</title>

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>

//html文檔加載完執行

$(function(){

$("#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;

}

var flag = false;

//id是否存在的校驗

$("table tr").each(function(){

if($(this).find("td:eq(1)").text() == id){

alert("iD已存在");

flag = true;

//return;

}

});

if(flag){

return;

}

//郵箱格式校驗

var reg = /\w+@\w+(\.\w+)+/;

if(!reg.test(email)){

alert("郵箱格式不正確");

return;

}

//添加數據

var $check = $("<td><input type='checkbox'/></td>")

var $id = $("<td>"+id+"</td>");

var $name = $("<td>"+name+"</td>");

var $email = $("<td>"+email+"</td>");

var $salary = $("<td>"+salary+"</td>");

var $tr = $("<tr></tr>");

$tr.append($check).append($id).append($name).append($email).append($salary);

$("table").append($tr);

});

//全選

$("#all").click(function(){

var check = $(this).attr("checked");

$("table input[type='checkbox']").attr("checked",check);

});

//刪除

$("#del").click(function(){

//獲取被選中的checkbox 刪除其所在行

$("table input:checked:not(input[id='all'])").parents("tr").remove();

});

})

</script>

</head>

<body>

<h2>添加新員工</h2>

ID：<input type="text" name="id"/>

姓名：<input type="text" name="name"/>

郵箱：<input type="text" name="email"/>

工資：<input type="text" name="salary"/>

</div>

<hr/>

<tr>

<th>

</th>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

<hr/>

ID：<input type="text" name="id"/>

姓名：<input type="text" name="name"/>

郵箱：<input type="text" name="email"/>

工資：<input type="text" name="salary"/>

</div>

</body>

</html>

<!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; }

</style><script src="jquery-1.4.2.js"></script><script type="text/javascript">/* --通過jQuery實現訪QQ列表好友分組-- */function openDiv(thisobj){//1.關閉其他行的div$(thisobj).parents("tr").siblings().find("div").hide();//2.展開或關閉點擊a標簽的兄弟div$(thisobj).next().toggle();}/*//thisobj --> 被點擊的A標簽//在顯示當前div之前, 先隱藏其他div$(thisobj).parents("tr").siblings().find("div").hide();$(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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 django：下拉框二級聯動實現 jq實現簡單的二級聯動下拉框前端下拉框實現聯查（二級聯動，三級聯動） python-員工信息管理系統 php mysql js 下拉框二級聯動 Android學習小記1（下）---下拉框二級聯動和跳轉樣例的實現 jQuery 下拉列表二級聯動插件原生js實現三級聯動下拉框 C++實現景區信息管理系統 Java 實現學生信息管理系統