HTML5与CSS3权威指南-第23章-案例2代码

1. 主窗口为order.html，对应Javascript脚本为order.js
2. 子窗口示例为SearchPerson.html，对应Javascript脚本为person.js
3. 使用样式为mainstyle.css

var data, click, datatable, datatableGoods, db, myCheck, myChild;
function init(){
	//alert("初始化");
	data = new Object;
	click = "row";
	datatable = document.getElementById("datatable");
	db = openDatabase('MyData', '', 'My database', 102400);
	db.transaction(function(tx){
		tx.executeSql('CREATE TABLE IF NOT EXISTS result(data TEXT)', []);
		tx.executeSql('CREATE TABLE IF NOT EXISTS orders(code TEXT, date TEXT, goodscode TEXT, brand TEXT, num INTEGER, price FLOAT, person TEXT, product TEXT)', []);
		tx.executeSql('CREATE TABLE IF NOT EXISTS goods(code TEXT)', []);
		tx.executeSql('CREATE TABLE IF NOT EXISTS brand(code TEXT, name TEXT)', []);
		tx.executeSql('CREATE TABLE IF NOT EXISTS product(code TEXT, name TEXT)', []);
		tx.executeSql('CREATE TABLE IF NOT EXISTS person(code TEXT, name TEXT)', []);
		
		tx.executeSql('SELECT * FROM orders', [], function(tx, rs){
			//alert("orders " + rs.rows.length);
			if(rs.rows.length == 0){
				tx.executeSql('INSERT INTO orders VALUES("20140808", "2014-08-08", "201408081403", "000", 10, 12.5, "000", "000")');
			}
		},function(tx, error){
			alert(error.source + "::" + error.message);
		});
		
		tx.executeSql('SELECT * FROM goods', [], function(tx, rs){
			//alert("goods " + rs.rows.length);
			if(rs.rows.length == 0){
				tx.executeSql('INSERT INTO goods VALUES("201408081403")');
				tx.executeSql('INSERT INTO goods VALUES("201408081413")');
			}
		},function(tx, error){
			alert(error.source + "::" + error.message);
		});
		
		tx.executeSql('SELECT * FROM brand', [], function(tx, rs){
			//alert("brand " + rs.rows.length);
			if(rs.rows.length == 0){
				tx.executeSql('INSERT INTO brand VALUES("000", "手游")');
				tx.executeSql('INSERT INTO brand VALUES("001", "浏览器")');
			}
		},function(tx, error){
			alert(error.source + "::" + error.message);
		});
		
		tx.executeSql('SELECT * FROM product', [], function(tx, rs){
			//alert("product " + rs.rows.length);
			if(rs.rows.length == 0){
				tx.executeSql('INSERT INTO product VALUES("000", "度厂")');
				tx.executeSql('INSERT INTO product VALUES("001", "某宝")');
				tx.executeSql('INSERT INTO product VALUES("002", "鹅厂")');
			}
		},function(tx, error){
			alert(error.source + "::" + error.message);
		});
		
		tx.executeSql('SELECT * FROM person', [], function(tx, rs){
			//alert("person " + rs.rows.length);
			if(rs.rows.length == 0){
				tx.executeSql('INSERT INTO person VALUES("000", "晓君")');
				tx.executeSql('INSERT INTO person VALUES("001", "杏子")');
			}
		},function(tx, error){
			alert(error.source + "::" + error.message);
		});
	});
	showAllData(true);
}
function tbxBrand_onblur(){
	var brand = document.getElementById("tbxBrand").value;
	document.getElementById("tbxBrandName").value = "";
	var name;
	db.transaction(function(tx){
		tx.executeSql('SELECT * FROM brand where code=?', [brand], function(tx, rs){
			name = rs.rows.item(0).name;
			document.getElementById("tbxBrandName").value = name;
		});
	});
}
function tbxPerson_onblur(){
	var person = document.getElementById("tbxPerson").value;
	document.getElementById("tbxPersonName").value = "";
	var name;
	db.transaction(function(tx){
		tx.executeSql('SELECT * FROM person where code=?', [person], function(tx, rs){
			name = rs.rows.item(0).name;
			document.getElementById("tbxPersonName").value = name;
		});
	});
}
function tbxProduct_onblur(){
	var product = document.getElementById("tbxProduct").value;
	document.getElementById("tbxProductName").value = "";
	var name;
	db.transaction(function(tx){
		tx.executeSql('SELECT * FROM product where code=?', [product], function(tx, rs){
			name = rs.rows.item(0).name;
			document.getElementById("tbxProductName").value = name;
		});
	});
}
function tbxNum_onblur(){
	var num, price;
	if(isNaN(parseInt(document.getElementById("tbxNum").value))){
		document.getElementById("tbxNum").value = "0";
	}
	num = document.getElementById("tbxNum").value;
	if(parseInt(document.getElementById("tbxNum").value) != num){
		document.getElementById("tbxNum").value = "0";
	}
	num = parseInt(num);
	price = parseFloat(document.getElementById("tbxPrice").value);
	document.getElementById("tbxMoney").value = num * price;
}
function tbxPrice_onblur(){
	var num, price;
	num = parseInt(document.getElementById("tbxNum").value);
	price = document.getElementById("tbxPrice").value;
	if(isNaN(parseFloat(price))){
		document.getElementById("tbxPrice").value = "0";
	}
	price = parseFloat(price);
	document.getElementById("tbxMoney").value = num * price;
}
function ifClosed(){
	if(myChild.closed == true){
		//alert("closed");
		window.clearInterval(myCheck);
		db.transaction(function(tx){		
		tx.executeSql('SELECT * FROM result', [], function(tx, rs){
			if(rs.rows.item(0).type == "goods"){
				document.all.item("tbxGoodsCode").value = rs.rows.item(0).data;
			}else if(rs.rows.item(0).type == "brand"){
				document.all.item("tbxBrand").value = rs.rows.item(0).data;
				tbxBrand_onblur();
			}else if(rs.rows.item(0).type == "person"){
				document.all.item("tbxPerson").value = rs.rows.item(0).data;
				tbxPerson_onblur();
			}else if(rs.rows.item(0).type == "product"){
				document.all.item("tbxProduct").value = rs.rows.item(0).data;
				tbxProduct_onblur();
			}
		},function(tx, error){
			alert(error.source + "::" + error.message);
		});
	});
	}
}
function btnSearch_onclick(type){
	var target = "Search" + type + ".html";
	myChild = window.open(target, 'popup', 'height=300, width=700, top=200, left=200, scrollbars=yes, resizable=yes, modal=yes');
	myCheck = window.setInterval(ifClosed, 20);
}
function btnAdd_onclick(){
	data.Code = document.getElementById("tbxCode").value;
	data.Date = document.getElementById("tbxDate").value;
	data.GoodsCode = document.getElementById("tbxGoodsCode").value;
	data.Brand = document.getElementById("tbxBrand").value;
	data.Num = document.getElementById("tbxNum").value;
	data.Price = document.getElementById("tbxPrice").value;
	data.Person = document.getElementById("tbxPerson").value;
	data.Product = document.getElementById("tbxProduct").value;
	db.transaction(function(tx){
		tx.executeSql('INSERT INTO orders VALUES (?,?,?,?,?,?,?,?)',
		[data.Code, data.Date, data.GoodsCode, data.Brand, data.Num, data.Price, data.Person, data.Product], function(tx, rs){
			alert("成功保存数据!");
			showAllData(false);
			btnNew_onclick();
		}, function(tx, error){
			alert(error.source + "::" + error.message);
		});
	});
}
function btnUpdate_onclick(){
	data.Code = document.getElementById("tbxCode").value;
	data.Date = document.getElementById("tbxDate").value;
	data.GoodsCode = document.getElementById("tbxGoodsCode").value;
	data.Brand = document.getElementById("tbxBrand").value;
	data.Num = document.getElementById("tbxNum").value;
	data.Price = document.getElementById("tbxPrice").value;
	data.Person = document.getElementById("tbxPerson").value;
	data.Product = document.getElementById("tbxProduct").value;
	db.transaction(function(tx){
		tx.executeSql('update orders set date=?, goodscode=?, brand=?, num=?, price=?, person=?, product=? where code=?',
		[data.Date, data.GoodsCode, data.Brand, data.Num, data.Price, data.Person, data.Product, data.Code], function(tx, rs){
			alert("成功修改数据!");
			showAllData(false);
		}, function(tx, error){
			alert(error.source + "::" + error.message);
		});
	});
}
function btnDelete_onclick(){
	data.Code = document.getElementById("tbxCode").value;
	db.transaction(function(tx){
		tx.executeSql('delete from orders where code=?',
		[data.Code], function(tx, rs){
			alert("成功删除数据!");
			showAllData(false);
		}, function(tx, error){
			alert(error.source + "::" + error.message);
		});
	});
}
function btnNew_onclick(){
	document.getElementById("form1").reset();
	document.getElementById("tbxCode").removeAttribute("readonly");
	document.getElementById("btnAdd").disabled = "";
	document.getElementById("btnUpdate").disabled = "disabled";
	document.getElementById("btnDelete").disabled = "disabled";
}
function btnClear_onclick(){
	if(document.getElementById("btnAdd").disabled == false){
		document.getElementById("tbxCode").value = "";
	}
	document.getElementById("tbxDate").value = "";
	document.getElementById("tbxGoodsCode").value = "";
	document.getElementById("tbxBrand").value = "";
	document.getElementById("tbxBrandName").value = "";
	document.getElementById("tbxNum").value = "";
	document.getElementById("tbxPrice").value = "";
	document.getElementById("tbxMoney").value = "";
	document.getElementById("tbxPerson").value = "";
	document.getElementById("tbxPersonName").value = "";
	document.getElementById("tbxProduct").value = "";
	document.getElementById("tbxProductName").value = "";
}
function tr_onclick(tr, i){
	var list = document.getElementsByTagName("tr");
	//alert(list.length);
	for(var i = 0; i < list.length; i++){
		//alert(list[i].id + list[i].class);
		if(list[i].id == click){
			//alert("*");
			list[i].removeAttribute("class", "focus");
		}
	}
	tr.setAttribute("class", "focus");
	click = tr.id;
	
	var tempArray1, tempArray2, tempArray3;
	var tc = tr.children;
	tempArray1 = document.getElementById("hiddenBrand").value.split(";");
	tempArray2 = document.getElementById("hiddenPerson").value.split(";");
	tempArray3 = document.getElementById("hiddenProduct").value.split(";");
	document.getElementById("tbxCode").value = tc.item(0).innerHTML;
	document.getElementById("tbxDate").value = tc.item(1).innerHTML.replace(/\//g,'-');
	document.getElementById("tbxGoodsCode").value = tc.item(2).innerHTML;
	document.getElementById("tbxBrand").value = tempArray1[i];
	document.getElementById("tbxBrandName").value = tc.item(3).innerHTML;
	document.getElementById("tbxNum").value = tc.item(4).innerHTML;
	document.getElementById("tbxPrice").value = tc.item(5).innerHTML;
	document.getElementById("tbxMoney").value = tc.item(6).innerHTML;
	document.getElementById("tbxPerson").value = tempArray2[i];
	document.getElementById("tbxPersonName").value = tc.item(7).innerHTML;
	document.getElementById("tbxProduct").value = tempArray3[i];
	document.getElementById("tbxProductName").value = tc.item(8).innerHTML;
	document.getElementById("tbxCode").setAttribute("readonly", true);
	document.getElementById("btnAdd").disabled = "disabled";
	document.getElementById("btnUpdate").disabled = "";
	document.getElementById("btnDelete").disabled = "";	
}
function showAllData(loadPage){
	db.transaction(function(tx){		
		tx.executeSql('SELECT orders.*, brand.name as brandName, product.name as productName, person.name as personName FROM orders	inner join brand on orders.brand = brand.code inner join person on orders.person = person.code inner join product on orders.product = product.code', [], function(tx, rs){
			if(!loadPage){
				removeAllData();
			}
			for(var i = 0; i < rs.rows.length; i++){
				showData(rs.rows.item(i), i);
			}
		},function(tx, error){
			alert(error.source + "::" + error.message);
		});
	});
}
function removeAllData(){
	for(var i = datatable.childNodes.length-1; i > 1; i--){
		datatable.removeChild(datatable.childNodes[i]);
	}
}
function showData(row, i){
	var tr = document.createElement('tr');
	tr.setAttribute("id", "row"+i);
	tr.setAttribute("onclick", "tr_onclick(this, "+i+")");
	var td1 = document.createElement('td');
	td1.innerHTML = row.code;
	var td2 = document.createElement('td');
	td2.innerHTML = row.date.replace(/\//g,'-');;
	var td3 = document.createElement('td');
	td3.innerHTML = row.goodscode;
	var td4 = document.createElement('td');
	td4.innerHTML = row.brandName;
	var td5 = document.createElement('td');
	td5.innerHTML = row.num;
	var td6 = document.createElement('td');
	td6.innerHTML = row.price;
	var td7 = document.createElement('td');
	td7.innerHTML = parseInt(row.num)*parseFloat(row.price);
	var td8 = document.createElement('td');
	td8.innerHTML = row.personName;
	var td9 = document.createElement('td');
	td9.innerHTML = row.productName;
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td4);
	tr.appendChild(td5);
	tr.appendChild(td6);
	tr.appendChild(td7);
	tr.appendChild(td8);
	tr.appendChild(td9);
	datatable.appendChild(tr);
	if(document.getElementById("hiddenBrand").value!=""){
		document.getElementById("hiddenBrand").value+=";";
	}
	document.getElementById("hiddenBrand").value += row.brand;
	if(document.getElementById("hiddenPerson").value!=""){
		document.getElementById("hiddenPerson").value+=";";
	}
	document.getElementById("hiddenPerson").value += row.person;
	if(document.getElementById("hiddenProduct").value!=""){
		document.getElementById("hiddenProduct").value+=";";
	}
	document.getElementById("hiddenProduct").value += row.product;
}


	
		
   
   
		
		 rel="stylesheet" type="text/css" href="mainstyle.css">
		<script type="text/javascript" src="person.js">
		</script>
	
	
			
		
   
   

			
    
    

				
     
     
负责人编号
负责人姓名
			
    
    
			
    
    

				
     
     
			
    
    
		
   
   
	

var obj, click, datatablePerson, db;
function personInit(){
	obj = "";
	click = "row";
	datatablePerson = document.getElementById("datatablePerson");
	db = openDatabase('MyData', '', 'My database', 102400);
	showPersonData();
}
function showPersonData(){
	//alert("show");
	db.transaction(function(tx){		
		tx.executeSql('SELECT * FROM person', [], function(tx, rs){
			removePersonData();
			for(var i = 0; i < rs.rows.length; i++){
				//alert("item");
				showPersonDataItem(rs.rows.item(i), i);
			}
		},function(tx, error){
			alert(error.source + "::" + error.message);
		});
	});
}
function removePersonData(){
	for(var i = datatablePerson.childNodes.length-1; i > 1; i--){
		datatablePerson.removeChild(datatablePerson.childNodes[i]);
	}
}
function showPersonDataItem(row, i){
	//alert(row);
	var tr = document.createElement('tr');
	tr.setAttribute("id", "row"+i);
	tr.setAttribute("onclick", "person_onclick(this)");
	var td1 = document.createElement('td');
	td1.innerHTML = row.code;
	var td2 = document.createElement('td');
	td2.innerHTML = row.name;
	tr.appendChild(td1);
	tr.appendChild(td2);
	datatablePerson.appendChild(tr);
}
function person_onclick(tr){
	var list = document.getElementsByTagName("tr");
	//alert(list.length);
	for(var i = 0; i < list.length; i++){
		//alert(list[i].id + list[i].class);
		if(list[i].id == click){
			//alert("*");
			list[i].removeAttribute("class", "focus");
		}
	}
	tr.setAttribute("class", "focus");
	click = tr.id;
	
	var tc = tr.children;
	obj = tc.item(0).innerHTML;
}
function btn_onclick(){
	db.transaction(function(tx){
		tx.executeSql('DROP TABLE IF EXISTS result');
		tx.executeSql('CREATE TABLE IF NOT EXISTS result(type TEXT, data TEXT)', []);
		tx.executeSql('INSERT INTO result VALUES(?, ?)', ["person", obj]);
	});
	window.close();
}


	
		
   
   
		
		 rel="stylesheet" type="text/css" href="mainstyle.css">
		<script type="text/javascript" src="order.js"></script>
	
	
	
		
   
   

			
    
    

     
     编辑订单信息
    
    
			
    
    

				
     
     
*订单编号
  
*订单日期
  
*商品编号
   
商标
    
数量
 
           
单价
  
金额
  
负责人
    
生产单位
    
				
				
     
     

					
      
      
					
      
      
					
      
      
					
      
      
					
      
      
				
     
     
			
    
    
		
   
   
		
		
   
   

			
    
    

     
     订单信息一览表
    
    
			
    
    

				
     
     
订单编号
订单日期
商标编号
商标
数量
单价
金额
负责人
生产单位
				
     
     
				
     
     
				
     
     
			
    
    
		
   
   
	

• 代码使用Web Sql数据库，由于ie和Firefox不支持，建议在chrome下运行
• 文件是本地编辑，本地测试，因此存在跨域通信问题，不能实现父子窗口通信，因此使用数据库来进行信息传递