使用JS语言来开发数据库增删改查 QQ313801120

视频观看地址：

源码下载地址：
github下载

代码部分：


<!--使用JS语言来开发 数据库增删改查 -->
<!DOCTYPE HTML>
<html>
<head>
    <title>Web SQL Database</title>
</head>
<body>
<a href="javascript:showAddEditLayout('');">添加一条新的</a>   
<div id="showData"> 
</div>
<div id="addEditDialogLayout">
  姓名
  <input type="text" name="name" id="name">
  <input type="button" name="button" id="button" value="添加" onClick="submitAddEdit()">
</div>
<script type="text/javascript">
var pubID="";
//默认创建数据库
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function(context){
   context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
   context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "喜悦TA")');
   context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "313801120")');
   context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "xiyueta")');
 });  
showData()
document.getElementById("addEditDialogLayout").style.display="none"

//提交添加修改
function submitAddEdit(){ 
	var butTitle=pubID==""?"添加":"修改";
	var name=document.getElementById('name').value 
	if(pubID!=""){
		editData(pubID,name)
	}else{
		addData(name)
	}
	alert(butTitle + "成功")
	showData()
}
//显示添加修改界面
function showAddEditLayout(id){
	var butTitle=""
	if(id==""||id==undefined){
		butTitle="添加"
		pubID=""
	}else{
		pubID=id
		butTitle="修改"
		
		db.transaction(function(context){
			context.executeSql('SELECT * FROM testTable where id='+id, [], function (context, results){ 
				document.getElementById('name').value=results.rows.item(0).name
			});
		});
		
		
	}
	document.getElementById('addEditDialogLayout').style.display=''
	document.getElementById('button').value=butTitle
}
//显示列表
function showData(){
	db.transaction(function(context){
		context.executeSql('SELECT * FROM testTable', [], function (context, results){
			var len = results.rows.length,i,id;
			//console.log('Got '+len+' rows.');
			var s="",c="<table width='100%' border='1' cellspacing='0' cellpadding='0'>";
			c+="<tr><td>ID</td><td>姓名</td><td>操作</td></tr>"
			for (i = 0; i <len; i++){
				id=results.rows.item(i).id
				s="<a href=\"javascript:showAddEditLayout('"+id+"')\">修改</a> | <a href='javascript:delData("+id+");'>删除</a>"
				c+="<tr><td>"+id+"</td><td>"+results.rows.item(i).name+"</td><td>"+s+"</td></tr>"
			}
			c+="</table>"
			document.getElementById("showData").innerHTML= c;
		});
	});
	return "";
}
//添加记录
function addData(val){  
	db.transaction(function(context){
		context.executeSql('SELECT * FROM testTable order by id desc', [], function (context, results){ 
			var len=results.rows.length
			if(results.rows.length>0){
				var id=results.rows.item(0).id+1 
				db.transaction(function (context) {
				   context.executeSql("INSERT INTO testTable (id, name) VALUES ("+id+",'"+val+"')");
					showData()
				}); 
			}
		});
	});

}
//修改记录
function editData(id,val){ 
	db.transaction(function (context) {
	   context.executeSql("UPDATE testTable set name='"+val+"' where id="+id);
	});
}
//删除记录
function delData(id){ 
	db.transaction(function (context) {
		context.executeSql('delete FROM testTable where id='+id);
		alert("删除ID（"+id+"）成功")
		showData()
	});
} 
</script> 
</body>
</html>
万水千山总是情，微信关注行不行
PAAJCMS二维码
随机内容
