<%@ page language= "java" pageencoding= "Utf-8"%>
<%@ page contenttype= "Text/html;charset=utf-8"%>
<%
Request.setcharacterencoding ("UTF-8");
Response.setcharacterencoding ("UTF-8");
Response.setcontenttype ("Text/html;charset=utf-8");
%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd ">
<title> Personnel Operations </title>
<meta http-equiv=content-type content= "text/html; Charset=utf-8 ">
<style>
#popDivAdd, #popDivDelete {
Position:absolute;
Visibility:hidden;
Overflow:hidden;
border:2px solid #AEBBCA;
Background-color: #EEF1F8;
Cursor:move;
padding:1px;
}
#popTitle {
Background: #9DACBF;
height:20px;
line-height:20px;
padding:1px;
}
#popForm {
padding:2px;
}
. title_left {
Font-weight:bold;
padding-left:5px;
Float:left;
}
. title_right {
Float:right;
}
#popTitle. Title_right a {
Color: #000;
Text-decoration:none;
}
#popTitle. title_right a:hover {
Text-decoration:underline;
Color: #FF0000;
}
</style>
<script>
function ShowPopup (type) {//Pop-up layer
var objdiv = Null;//objdiv is the target div
if (type = = ' Add ') {
Objdiv = document.getElementById ("Popdivadd");
}
Else
if (type = ' delete ') {
Objdiv = document.getElementById ("Popdivdelete");
}
ObjDiv.style.top = "50px";//Set the distance from the top edge of the pop-up layer
ObjDiv.style.left = "200px";//Set the distance of the pop-up layer from the left edge
ObjDiv.style.width = "300px";//Set the width of the pop-up layer
ObjDiv.style.height = "220px";//Set the height of the pop-up layer
ObjDiv.style.display = "block";
objDiv.style.visibility = "visible";
}
function Hidepopup (type) {//Shutdown layer
var objdiv = Null;//objdiv is the target div
if (type = = ' Add ') {
Objdiv = document.getElementById ("Popdivadd");
}
Else
if (type = ' delete ') {
Objdiv = document.getElementById ("Popdivdelete");
}
objDiv.style.visibility = "hidden";
}
</script>
<body>
<!--form Div-->
<form action= "insert_test.jsp" method= "POST" >
<p>
ID: <input type= "text" name= "id" value= "0"/></br>
Name: <input type= "text" name= "name" value= ""/></br>
Sex: <input type= "text" name= "Sex" value= ""/></br>
Ages: <input type= "text" name= "Age" value= "/></br>
</p>
<input type= "Submit" value= "submitted"/>
<input type= "reset" value= "reset"/>
<input type= "reset" value= "Cancel" onclick= "Hidepopup (' Add ')"/>
</form>
</div>
</div>
<div id= "Popdivdelete" ><!--remove a person's div-->
<div id= "Poptitle" ><!--title div-->
<span class= "Title_left" > Delete personnel </span> <span class= "Title_right" >
<a href= "#" onclick= "hidepopup (' delete ');" > Close </a> </span>
</div>
<div id= "Popform" ><!--form Div-->
<form action= "delete_test.jsp" method= "POST" >
<p>
ID: <input type= "text" name= "id" value= "/> </br>
Name: <input type= "text" name= "name" value= ""/> </br>
</p>
<input type= "Submit" value= "submitted"/>
<input type= "reset" value= "reset"/>
<input type= "reset" value= "Cancel" onclick= "hidepopup (' delete ')"/>
</form>
</div>
</div>
<p>
<input name= "" type= "button" onclick= "location.href = ' query_test.jsp '" value= "query"/>
<input name= "" type= "button" onclick= "ShowPopup (' Add ')" value= "Add"/>
<input name= "type=" button "onclick=" showPopup (' delete ') ' value= ' delete '/>
</p>
<script type= "Text/javascript" >
/*-------------------------Drag the left mouse button---------------------* *
/*--------You can delete this part of the code when you do not need to implement this feature------------* *
var objdiv = document.getElementById ("Popdiv");
var Isie = document.all? true:false;//to determine browser type
Document.onmousedown = function (evnt) {//execute this function when the left mouse button is pressed
var evnt = evnt? Evnt:event;
if (Evnt.button = = (document.all 1:0)) {
moused = true;//moused is the left mouse button status flag, True to indicate that the left button is pressed
}
}
Objdiv.onmousedown = function (evnt) {
Objdrag = This;//objdrag for the dragged object
var evnt = evnt? Evnt:event;
if (Evnt.button = = (document.all 1:0)) {
mx = evnt.clientx;
my = Evnt.clienty;
ObjDiv.style.left = objdiv.offsetleft + "px";
ObjDiv.style.top = objdiv.offsettop + "px";
if (Isie) {
Objdiv.setcapture ();
ObjDiv.filters.alpha.opacity = 50;//The transparency changes when the mouse is pressed
} else {
Window.captureevents (event.mousemove);//capture Mouse drag events
ObjDiv.style.opacity = 0.5;//The transparency changes when the mouse is pressed
}
}
}
Document.onmouseup = function () {
moused = false;//Left button loosened
Objdrag = "";
if (Isie) {
Objdiv.releasecapture ();
ObjDiv.filters.alpha.opacity = 100;//The transparency changes when the mouse Zuo open
} else {
Window.releaseevents (objdiv.mousemove);//release Mouse drag Event
ObjDiv.style.opacity = 1;//The transparency changes when the mouse Zuo open
}
}
Document.onmousemove = function (evnt) {
var evnt = evnt? Evnt:event;
if (moused = = True && Objdrag) {
var mrx = evnt.clientx-mx;
var mry = evnt.clienty-my;
ObjDiv.style.left = parseint (objDiv.style.left) + MRX + "px";
ObjDiv.style.top = parseint (objDiv.style.top) + Mry + "px";
mx = evnt.clientx;
my = Evnt.clienty;
}
}
</script>
</body>
In the browser direct access to the INDEX_TEST.JSP page, click the Delete button, fill in the ID or any one of the names and submit can be deleted:
The contents of the database before the delete (bottom left) and post (bottom right) are displayed as follows:
In general, the query, insert and DELETE functions are implemented.
Now found that the problem is: the original is to achieve the pop-up level can be moved, but now can't move, the specific reason is the mouse drag part of the first code: var objdiv = document.getElementById ("Popdiv"); Not specified well. are looking for ways to solve. Who has a better way, please help me, thank you!
