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> <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();'> <a href='javascript:void(0);' onclick=\"openLiuzm('addDataDiv');\">[添加新用户]</a> <a href='javascript:void(0);' onclick=\"deleteDBDataBySelectedId();\">[删除选中用户]</a> <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();'> <a href='javascript:void(0);' onclick=\"openLiuzm('addDataDiv');\">[添加新用户]</a> <a href='javascript:void(0);' onclick=\"deleteDBDataBySelectedId();\">[删除选中用户]</a> <a href='javascript:void(0);' onclick=\"closeDiv('searchDiv');\">[关闭]</a></td></tr></tbody></table>";
}
document.getElementById("searchDiv").innerHTML="人员信息 >> <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、主操作页面。
后续效果，如想查看请下载附件运行！
相关推荐
在JavaScript中，与Access数据库进行交互通常涉及到使用ActiveX对象，因为JavaScript本身并不直接支持数据库操作。Access数据库是一种关系型数据库管理系统，适用于小型项目或本地数据存储。在Web应用程序中，如果你...
在标题"JS操作ACCESS数据库"中，所提及的是利用JavaScript来操作Microsoft Access数据库的技术。Access是一款关系型数据库管理系统，它提供了ODBC（开放数据库连接）接口，使得其他编程语言，包括JavaScript，可以...
JavaScript操作数据库JS操作Access数据库，跟其他语言操作差不多，总结了一下习惯代码，仅供参考学习。 现在在F盘有文件abc.mdf，表名为Student，一共2个字段，Id数字类型主键，stuName文本类型，现对该表进行增删改...
在“asp.net用三层 增删改查完整实例”中，我们将深入探讨如何使用ASP.NET的三层架构来实现基本的数据操作：增加（Insert）、删除（Delete）、修改（Update）和查询（Select）。 三层架构是一种常见的软件设计模式...
在标题“js操作access数据库”中，我们讨论的是如何使用JavaScript与Microsoft Access数据库进行交互。 Access数据库是微软开发的一种关系型数据库管理系统，使用Jet引擎，适用于小型到中型企业级的数据存储和管理...
一种常见的方式是使用ActiveXObject，这是Internet Explorer浏览器特有的一个对象，它可以允许JavaScript与Windows操作系统中的组件进行交互，包括Microsoft JET数据库引擎，这就是Access数据库的底层引擎。...
然而，JavaScript也可以通过ActiveXObject或Node.js的第三方库与数据库进行交互，包括Microsoft Access数据库。本文将详细介绍如何使用JS连接和操作Access数据库。 在Internet Explorer浏览器中，可以通过...
在这个小例子中，我们将探讨如何使用JavaScript在静态HTML页面上连接并操作Access数据库。 首先，为了在HTML中使用JavaScript与Access数据库交互，我们需要一个服务器端的技术来作为桥梁，因为JavaScript本身无法...
在本案例中，“asp+access通用查询系统可增删改查分页 v20221024.zip”是一个基于ASP技术构建的数据库管理系统，它结合了Access数据库，用于实现基本的数据操作功能，如添加（Add）、删除（Delete）、修改（Update）...
然而，有时也需要JavaScript能够直接操作后端数据库，比如 Microsoft Access 数据库。本文将详细介绍如何使用 JavaScript 通过 ActiveX 对象来连接并操作 Access 数据库。 #### 二、环境搭建 为了能够使用 ...
Access数据库是一种常用的轻量级数据库管理系统，由微软公司开发，主要用于数据存储、管理与分析。在传统的使用方式中，你需要安装Microsoft Office Access软件才能创建、修改和管理Access数据库（.mdb或.accdb文件...
【ASP动态网站实例（ACCESS数据库）】是一个基于ASP（Active Server Pages）技术构建的网站项目，结合了ACCESS数据库来实现各种交互式功能。ASP是一种由微软开发的服务器端脚本环境，它允许开发者在HTML中嵌入脚本...
- **SQL查询**：通过SQL语句进行数据的增删改查操作，如添加新问题、更新答案、查找相关信息等。 - **索引优化**：为频繁查询的字段创建索引，提升查询效率。 - **数据备份与恢复**：定期备份Access数据库，防止...
在本实例中，我们看到的"ASP源码—AJAX+ACCESS数据库操作实例源码.zip"是一个包含ASP技术与AJAX（Asynchronous JavaScript and XML）以及ACCESS数据库交互的源代码压缩包。这个实例可能是一个教学资源或实际项目中的...
"基于Access数据库的asp人事管理系统"是一个使用ASP（Active Server Pages）技术开发的人力资源管理应用程序，其核心数据存储是通过Microsoft Access数据库实现的。Access数据库以其易用性和灵活性著称，适合中小型...
在日常工作中，经常会遇到需要对Microsoft Access数据库中的数据进行批量更新的情况。例如，可能需要更改某一列中的所有值，或者更新某个表中的特定记录。手动逐条修改不仅耗时耗力，而且容易出错。因此，开发一个...
这个应用具有登录、注册、数据插入、修改、查询和删除等基本功能，它通过ADO.NET接口与Microsoft Access数据库进行交互。 1. ASP.NET基础： ASP.NET是微软提供的一个开发Web应用的平台，支持多种语言如C#、VB.NET...
在这样的网站中，开发者可以直接在JSP页面上编写SQL查询，与Access数据库进行交互，实现数据的增删改查功能。 【描述】：“一个运用jsp和access连接的小型网站。不需要配置配置文件，没有使用任何框架” 描述中的...