<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script language="javascript" src="jquery-3.1.1.min.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#bt1").click(function()
{
var id=document.getElementById("t1").value;
var name=document.getElementById("t2").value;
var birth=document.getElementById("t3").value;
var blood=document.getElementById("se1").value;
var school=document.getElementById("se2").value;
alert(id +" "+name+" "+birth+" "+blood+" "+school);
if (id!="")
{
if (name!="")
{
var db=new Firebase( "https://hopetext-88e84.firebaseio.com");
db.push({pid:id,pname:name,pbirth:birth,pblood:blood,pschool:school});
alert("資料寫入firebase成功 1");
}
else
{
alert("請輸入姓名資料");
document.getElementById("t1").focus();
}
}
else
{
alert("請輸入編號資料");
document.getElementById("t1").focus();
}
});
$("#bt2").click(function()
{
location.href="dbpageform5.html";
});
$("#bt3").click(function()
{
location.href="dbpagebrower5.html";
});
$("#bt4").click(function()
{
location.href="dbpagequery5.html";
});
$("#bt5").click(function()
{
location.href="dbpagequeryIn5.html";
});
});
function textfun1()
{
var id=document.getElementById("t1").value;
if (id!="")
{
document.getElementById("sp1").innerHTML="";
}
else
{
document.getElementById("sp1").innerHTML="<font color='#FF0000'>*[p1001]</font>";
}
}
function textfun2()
{
var id=document.getElementById("t2").value;
if (id!="")
{
document.getElementById("sp2").innerHTML="";
}
else
{
document.getElementById("sp2").innerHTML="<font color='#FF0000'>*[p1001]</font>";
}
}
</script>
<body>
<center>
<form id="f1">
<table id="tb1" width="300" height="500" rules="none">
<tr>
<td colspan="2">雲端個人資料</td>
</tr>
<tr><td colspan="2">編號：<input type="text" id="t1" name="t1" size="30" onchange="textfun1()" />
<br /><span id="sp1" ><font color="#FF0000">*[p1001]</font></span>
</td>
</tr>
</tr>
<tr><td colspan="2" >姓名：<input type="text" id="t2" name="t2" size="30" onchange="textfun2()" />
<br /><span id="sp2" ><font color="#FF0000">*[p1001]</font></span>
</td>
</tr>
</tr>
<tr><td colspan="2" >生日：<input type="text" id="t3" name="t3" size="30" /></td>
</tr>
</tr>
<tr><td colspan="2" >血型：
<select id="se1" name="se1" style="width:50px">
<option value="A">A </option>
<option value="B">B </option>
<option value="O">O </option>
<option value="AB">AB </option>
</select>
</td>
</tr>
<tr>
<td colspan="2">學歷：
<select id="se2" name="se2" style="width:100px">
<option value="中學">中學 </option>
<option value="專科">專科 </option>
<option value="大學">大學 </option>
<option value="研究所">研究所 </option>
<option value="其他">其他</option>
</select>
</td>
</tr>
<tr>
<td align="center">
<input type="button" id="bt1" name="bt1" value="儲存" />
</td>
<td align="center" >
<input type="button" id="bt2" name="bt2" value="清除" />
</td>
</tr>
<tr>
<td align="center">
<input type="button" id="bt3" name="bt3" value="瀏覽" />
</td>
<td align="center" >
<input type="button" id="bt4" name="bt4" value="查詢" />
</td>
</tr>
<tr>
<td align="center" >
<input type="button" id="bt5" name="bt5" value="區間查詢" />
</td>
</tr>
<tr>
<td colspan="2" align="right">Firebase Database</td>
</tr>
</table>
</form>
</center>
</body>
</html>
dbpagebrower5.html
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script language="javascript" src="jquery-3.1.1.min.js"></script>
<script language="javascript">
$(document).ready(function()
{
var str="";
db=new Firebase( "https://hopetext-88e84.firebaseio.com");
db.on('value',function(data)
{
$.each(data.val(),function(k,v)
{
str=str+v.pid+" "+v.pname+" "+v.pbirth+" "+v.pblood+" "+v.pschool+"<p>"
});
document.getElementById("dv1").innerHTML=str;
});
});
</script>
<body>
<center>
<form id="f1">
<table id="tb1" width="300" height="500" rules="none">
<tr>
<td ><div id="dv1" style="width:300px; height:500px; background-color:#0FF"></div></td>
</tr>
</table>
</form>
============================
dbpagequery5.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script language="javascript" src="jquery-3.1.1.min.js"></script>
<script language="javascript">
$(document).ready(function()
{
var str="";
$("#qbt1").click(function()
{
var id=document.getElementById("t1").value;
db=new Firebase( "https://hopetext-88e84.firebaseio.com");
db.on('value',function(data)
{
$.each(data.val(),function(k,v)
{
if (id==v.pid)
{
str=str+v.pid+" "+v.pname+" "+v.pbirth+" "+v.pblood+" "+v.pschool+"<p>"
document.getElementById("dv1").innerHTML=str;
}
});
});
});
});
</script>
<body>
<center>
<form id="f1">
<table id="tb1" width="300" height="500" rules="none" background="bg7.jpg" >
<tr>
<td height="10" align="right" >查詢編號
<input type="text" id="t1" name="t1" size="20" />
<input type="button" id="qbt1" name="qbt1" value="查詢" />
</td>
</tr>
<tr>
<td ><div id="dv1" style="width:300px; height:500px; overflow:scroll; "></div></td>
</tr>
<tr>
<td height="10" align="right" >
<a href="dbpageform5.html">回首頁</a>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
=================
區間查詢
$(document).ready(function()
{
var str="";
$("#qbt1").click(function()
{
var sid=document.getElementById("t1").value;
var eid=document.getElementById("t2").value;
db=new Firebase( "https://hopetext-88e84.firebaseio.com");
db.on('value',function(data)
{
$.each(data.val(),function(k,v)
{
if (v.pid>=sid && v.pid<=eid)
{
str=str+v.pid+" "+v.pname+" "+v.pbirth+" "+v.pblood+" "+v.pschool+"<p>"
}
document.getElementById("dv1").innerHTML=str;
});
});
});
});
</script>
<body>
<center>
<form id="f1">
<table id="tb1" width="300" height="500" rules="none" background="bg7.jpg" >
<tr>
<td height="10" align="left" >查詢開始編號
<input type="text" id="t1" name="t1" size="20" /><br/>查詢結束編號
<input type="text" id="t2" name="t2" size="20" /><p>
<input type="button" id="qbt1" name="qbt1" value="查詢" style="width:300px" />
</td>
</tr>
<tr>
<td ><div id="dv1" style="width:300px; height:500px; overflow:scroll; "></div></td>
</tr>
<tr>
<td height="10" align="right" >
<a href="dbpageform5.html">回首頁</a>
</td>
</tr>
</table>
</form>
</center>
</body>
沒有留言:
張貼留言