自己做的非常簡陋的點選學校的效果


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>註冊頁面</title>
<link href="../css/validator.css" type="text/css" rel="stylesheet"></link>
<style type="text/css">
body{
margin:0px auto;
text-align:center;
}
#pop{
background-color:blue;
margin-top:-250px;
}
</style>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
var TableCol=4;
var access=false;
var ja=[];
ja[0]="北京大學";
ja[1]="山東大學";
ja[2]="齊魯軟件學院";
ja[3]="青島大學";
ja[4]="山東師範大學";
$(document).ready(function (){
alert("ss");
$('#selectSchool').click(function(){
alert("ss");
if(access)
{
$('#pop').show();
}
else
{
/**
$.ajax({
url:'../servlet/GetSchoolname',
type:'GET',
data:{'q':'',time:new Date()},
dataType:'text',
success:function(data){
data=unescape(unescape(data));
ja=data.split("\n");
TableCol=getCol(ja.length);
showSchool();
}
});
*/
TableCol=getCol(ja.length);
showSchool();
}
})
function showSchool(){
var table=$('table',$('#pop'));
$('#pop').html(generate()).show();
$('div#title>a').click(function (){
$('#pop').hide();
});
$('table td',$('#pop')).each(function (i){
$(this).click(function (){
$('#school').val($(this).html());
$('#pop').hide();
});
})
access=true;
}
function generate()
{
var res="";
res+="<div id='title'><a href='#'><font color='red'>關閉</font></a></div>";
var i,j=0;
res+="<div id='content'><table class='schoolTable' border=1>";
while(j<(ja.length/TableCol))
{
res+="<tr>";
for (i = 0; i < TableCol; i = i + 1) {
if ((j*TableCol+i) >= ja.length)
{
break;
}
res+="<td>";
res+=ja[j*TableCol+i];
res+="</td>";
}
res+="</tr>";
j++;
}
res+="</table></div>";
return res;
}
function getCol(num)
{
for(var i=0;i<num;i=i+1)
{
if(i*i>num)
{
break;
}
}
return i;
}
</script>
</head>
<body>
<form method="post" name="form1" id="form1" >
<table border="0px" style="font-size:12px" width="400px">
<tr>
<td>所在學校:</td>
<td><input name="school" type="text" id="school" maxlength="50" /></td>
<td><input type="button" id="selectSchool" value="選擇學校"/></td>
</tr>

<tr>
<td colspan="3" align="left" >
<td width="50px"><input type="submit" name="button" id="button" value="提交" /></td>
</tr>
</table>
<div id="pop"></div>
</form>
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章