1、解压附件,双击 Html_conDB.html文件可以查看效果;以下是实现功能的部分JS代码。
var db="Database.mdb"; var rs=new Object(); function getDBPath(){ //以当前页面文件为基础,找到文件所在的绝对路径。 var filePath = location.href.substring(0, location.href.indexOf("Html_conDB.html")); var path = filePath + db; //去掉字符串中最前面的"files://"这8个字符。 path = path.substring(8).replace(/\//g,"//").replace(/%20/g," "); return path; } function opendb(dbpath,sql){ var opendb =new ActiveXObject("ADODB.Recordset"); opendb.ActiveConnection = "DBQ="+dbpath+";DRIVER={Microsoft Access Driver (*.mdb)};"; opendb.Source = sql; opendb.CursorType = 1; opendb.CursorLocation = 2; opendb.LockType = 3; opendb.Open(); return opendb; } function readDB(){ showDiv("searchDiv"); document.getElementById("mainDataDiv").innerHTML="<h3 align='left'>查询结果:</h3>"; rs=opendb(getDBPath(),"select * from test_tbl"); var div_content="<table id='mytable'><tbody><tr><th>名字</th><th>密码</th><th>操作</th></tr>"; var inloop_div_content=""; while(!rs.EOF){ var u_id=rs("ID"); var u_name=rs("TNAME"); var u_pass=rs("TPASS"); inloop_div_content=inloop_div_content+"<tr><td><input type='checkbox' name='userInfo' value='"+u_id+"'> <label id='"+u_id+"'>"+u_name+"</label></td><td>"+u_pass+"</td><td align='center'><a href='javascript:void(0);' οnclick=\"deleteDBDataById('"+u_id+"');\">删除</a> <a href='javascript:void(0);' οnclick=\"openLiuzm_update('"+u_id+"','"+u_name+"','updateDataDiv');\">修改</a></td></tr>"; rs.moveNext; } if(inloop_div_content==""){ div_content=div_content+"<tr><td colspan='3'><h3><font color='red'>查询记录为空!</font></h3></td></tr><tr><td align='right' colspan='3'><img alt='刷新结果' src='shuaxin.jpg' style='cursor:hand;' align='middle' οnclick='readDB();'> <a href='javascript:void(0);' οnclick=\"openLiuzm('addDataDiv');\">[添加新用户]</a> <a href='javascript:void(0);' οnclick=\"deleteDBDataBySelectedId();\">[删除选中用户]</a> <a href='javascript:void(0);' οnclick=\"closeDiv('searchDiv');\">[关闭]</a></td></tr></tbody></table>"; }else{ div_content=div_content+inloop_div_content+"<tr><td align='right' colspan='3'><img alt='刷新结果' src='shuaxin.jpg' style='cursor:hand;' align='middle' οnclick='readDB();'> <a href='javascript:void(0);' οnclick=\"openLiuzm('addDataDiv');\">[添加新用户]</a> <a href='javascript:void(0);' οnclick=\"deleteDBDataBySelectedId();\">[删除选中用户]</a> <a href='javascript:void(0);' οnclick=\"closeDiv('searchDiv');\">[关闭]</a></td></tr></tbody></table>"; } document.getElementById("searchDiv").innerHTML="人员信息 >> <input type='radio' name='selectRadio' οnclick=\"selectAllOrNot('true')\">全选 /<input type='radio' name='selectRadio' οnclick=\"selectAllOrNot('false')\">全不选"+div_content; rs.CLOSE; } function addDataToDB(){ var user_name=document.getElementById("user_name"); var user_pass=document.getElementById("user_pass"); if(user_name.value==""){ alert("名字不能为空!"); user_name.focus(); return false; }else if(user_pass.value==""){ alert("密码不能为空!"); user_pass.focus(); return false; }else if(user_pass.value!="" && user_pass.value.length<6){ alert("密码长度必须大于6!"); user_pass.focus(); return false; }else{ rs=opendb(getDBPath(),"select * from test_tbl where id="+0); rs.ADDNEW; rs("TNAME")=user_name.value; rs("TPASS")=user_pass.value; rs.UPDATE; rs.CLOSE; alert("写记录成功!"); close("addDataDiv"); readDB(); return true; } } function deleteDBDataById(_id){ if(!confirm("确定要删除吗?")){ return false; } var bool=false; rs=opendb(getDBPath(),"select * from test_tbl where id in ("+_id+")"); while(!rs.EOF){ rs.DELETE; rs.moveNext; bool=true; } if(bool){ alert("删除成功!"); readDB(); }else{ alert("没有要删除的数据!"); } rs.CLOSE; } function deleteDBDataBySelectedId(){ if(!confirm("确定要删除吗?")){ return false; } var bool=false; var selectedUserId=getSelectUser(); rs=opendb(getDBPath(),"select * from test_tbl where id in ("+selectedUserId+")"); while(!rs.EOF){ rs.DELETE; rs.moveNext; bool=true; } if(bool){ alert("删除成功!"); readDB(); } rs.CLOSE; } //打开更新DIV层 var update_uid; var update_uname; function openLiuzm_update(_id,_uname,div_id){ update_uid=_id; update_uname=_uname; document.getElementById("update_user_name").value=_uname; change(div_id); showLogin(div_id); popCoverDiv(); void(0);//不进行任何操作,如:<a href="#">aaa</a> } function updateDBDataById(){ var update_userName=document.getElementById("update_user_name"); if(update_userName.value==""){ alert("请输入要更新的名字!"); update_userName.focus(); return false; } rs=opendb(getDBPath(),"select * from test_tbl where id="+update_uid); rs("TNAME")=update_userName.value; rs.UPDATE; alert("修改记录成功!"); close("updateDataDiv"); readDB(); rs.CLOSE; } function showDiv(div_id){ document.getElementById(div_id).style.display="block"; } function closeDiv(div_id){ document.getElementById(div_id).style.display="none"; if("searchDiv"==div_id){ document.getElementById("mainDataDiv").innerHTML="<input type=\"button\" value=\"查询所有用户\" style=\"width:126px;\" οnclick=\"readDB();\">"; } } function selectAllOrNot(flag){ var myselect=document.getElementsByTagName("input"); if(flag=="true"){ for(var i=0;i<myselect.length;i++){ if(myselect[i].type=="checkbox"){ myselect[i].checked=true; } } }else if(flag=="false"){ for(var i=0;i<myselect.length;i++){ if(myselect[i].type=="checkbox"){ myselect[i].checked=false; } } } } function getSelectUser(){ var boxes = document.getElementsByName("userInfo"); var check = ""; var newCheck=""; var checked = false; for (var i = 0; i < boxes.length; i++){ if (boxes[i].checked == true){ checked = true; check += boxes[i].value+','; } } if(!checked){ alert("至少选择一个用户;若没记录信息,请添加记录!"); return false; } newCheck = check.substring(0,check.length-1); return newCheck; } var Obj=''; document.οnmοuseup=MUp; document.οnmοusemοve=MMove; function MDown(Object){ Obj=Object.id document.all(Obj).setCapture() pX=event.x-document.all(Obj).style.pixelLeft; pY=event.y-document.all(Obj).style.pixelTop; } function MMove(){ if(Obj!=''){ document.all(Obj).style.left=event.x-pX; document.all(Obj).style.top=event.y-pY; } } function MUp(){ if(Obj!=''){ document.all(Obj).releaseCapture(); Obj=''; } }
2、主操作页面。
后续效果,如想查看请下载附件运行!