JS操作Microsoft Access数据库增、删、改查-优快云博客

本文介绍了一种使用JavaScript通过ADO对象操作Access数据库的方法，并提供了完整的示例代码，包括查询、添加、删除和更新数据等功能。
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);' onclick=\"deleteDBDataById('"+u_id+"');\">删除</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0);' onclick=\"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' onclick='readDB();'>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0);' onclick=\"openLiuzm('addDataDiv');\">[添加新用户]</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0);' onclick=\"deleteDBDataBySelectedId();\">[删除选中用户]</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0);' onclick=\"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' onclick='readDB();'>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0);' onclick=\"openLiuzm('addDataDiv');\">[添加新用户]</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0);' onclick=\"deleteDBDataBySelectedId();\">[删除选中用户]</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0);' onclick=\"closeDiv('searchDiv');\">[关闭]</a></td></tr></tbody></table>";
	}
	document.getElementById("searchDiv").innerHTML="人员信息&nbsp;>>&nbsp;<input type='radio' name='selectRadio' onclick=\"selectAllOrNot('true')\">全选 /<input type='radio' name='selectRadio' onclick=\"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;\" onclick=\"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.onmouseup=MUp;
document.onmousemove=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、主操作页面。
后续效果，如想查看请下载附件运行！