<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 1. db open
var db = openDatabase("sawonDb","1.0","sawon db",1024*1024);
//openDatabase(DB이름, 버전, 설명, 크기)
//DB이름은 없으면 생성 있으면 참조
// 2. create table
db.transaction(function(tx){ //transaction() : db 접근 메소드
tx.executeSql("create table if not exists sawon(sawon_id integer primary key autoincrement, sawon_name, sawon_age integer)");
});
function sqlSelect(){
db.transaction(function(tx){
tx.executeSql("select * from sawon", [], function(tx,rs){
var list = document.getElementById("list");
list.innerHTML = "";
var rows = rs.rows; // 결과를 행 단위로 읽기(배열이 될것이다)
for(var i = 0; i< rows.length; i++){
var row = rows.item(i); // 하나의 레코드 읽기
//Option(text, value) - 추가해줄 옵션을 셋팅해줌
var str = new Option(row.sawon_id + "\t" + row.sawon_name + "\t" + row.sawon_age, row.sawon_id);
list.options[list.options.length] = str; // 옵션 추가
}
});
});
}
function sqlInsert(){
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
db.transaction(function(tx){
// executeSql(sql,배열로 인서트값 작성, 인서트 후 수행할 함수)
tx.executeSql("insert into sawon(sawon_name,sawon_age) values(?,?)",[name, age], function(tx, rs){
alert(rs.insertId + "번 자료 추가 성공");
sqlSelect(); // db 자료 읽은 후, select로 보이기
});
});
}
function sqlDelete(){
db.transaction(function(tx){
var list = document.getElementById("list");
if(list.selectedIndex < 0){ // 자료가 없으면 빠져나감
return;
}
//선택된 옵션의 value를 얻음 (sqlSelect()함수에서 value와 옵션의 id가 동일하게 만들어줬음)
var selData = list.options[list.selectedIndex].value;
// alert(selData);
db.transaction(function(tx){
//executeSql(sql, 배열로?데이터입력, sql실행 후 실행할 함수)
tx.executeSql("delete from sawon where sawon_id=?", [selData], function(){
sqlSelect();
});
});
});
}
window.onload = function(){
document.getElementById("btnAdd").onclick = function(){
sqlInsert();
}
document.getElementById("btnRemove").onclick = function(){
sqlDelete();
}
sqlSelect();
}
</script>
</head>
<body>
<h2>DB 연습</h2>
이름 : <input type="text" id="name" size="10">
나이 : <input type="text" id="age" size="4">
<button id="btnAdd">저장</button>
<hr>
<select id="list" size="5" style="width:200px;"></select>
<button id="btnRemove">선택 항목 삭제</button>
</body>
</html>
'HTML' 카테고리의 다른 글
| HTML5 input date에 오늘 날짜 넣기 (0) | 2014.04.16 |
|---|---|
| form태그의 enctype 속성 (2) | 2014.04.02 |
| HTML5 - 파일읽기 (0) | 2014.02.14 |
| HTML5 - 구글맵 사용하기 (0) | 2014.02.14 |
| html5 - webworker (쓰레드 개념) 멀티태스킹 (0) | 2014.02.14 |