JSQL client-based performance statistics implementation method

Home

Web Front-end

JS Tutorial

JSQL client-based performance statistics implementation method_javascript skills

May 16, 2016 pm 06:28 PM

Score statistics

Copy code The code is as follows:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Marks Count</title> 
<script type="text/javascript" src="../src/YESBRAIN.js"></script> 
<script type="text/javascript" src="../src/JSQL.js"></script> 
<script type="text/javascript" src="../src/JSQL-Memory.js"></script> 
<script type="text/javascript" src="../src/JSQL-DOM.js"></script> 
<style> 
#marks input { 
width: 100px; 
} 
</style> 
</head> 
<body> 
<center> 
<h1>Marks Count</h1> 
<p> 
<button onclick="insertline();"> Add one line </button> 
<button onclick="savemarks();"> Save Changes </button> 
<span>By<span> 
<select id="byfield"> 
<option value="chinese" selected="selected">Chinese</option> 
<option value="math">Math</option> 
<option value="english">English</option> 
</select> 
<select id="ascdesc"> 
<option value="desc" selected="selected">Desc</option> 
<option value="asc">Asc</option> 
</select> 
<button onclick="order();">Order</button> 
</p> 
<form name="marks" id="marks"> 
<span>Name:</span> 
<input type="text" id="name[1]" value="zhangsan"> 
<span>Sex:</span> 
<input type="text" id="sex[1]" value="female"> 
<span>Chinese:</span> 
<input type="text" id="chinese[1]" value="96"> 
<span>Math:</span> 
<input type="text" id="math[1]" value="94"> 
<span>English:</span> 
<input type="text" id="english[1]" value="98"> 
<br> 
</form> 
</center> 
<script type="text/javascript"> 
var marks = [ 
{ 
name: 'Lisi', 
sex: 'Female', 
chinese: '88', 
math: '90', 
english: '92' 
}, 
{ 
name: 'Wangwu', 
sex: 'Female', 
chinese: '92', 
math: '80', 
english: '82' 
}, 
{ 
name: 'Lilei', 
sex: 'Female', 
chinese: '93', 
math: '88', 
english: '87' 
}, 
{ 
name: 'HanMeimei', 
sex: 'Male', 
chinese: '97', 
math: '92', 
english: '100' 
}, 
{ 
name: 'Wangjuan', 
sex: 'Male', 
chinese: '92', 
math: '93', 
english: '90' 
} 
]; 

function addto(index,name,sex,chinese,math,english) { 
"insert into marks (nodename,innerHTML) values ('span','Name:')".ForDOM().execute(); 
("insert into marks (nodename,type,id,value) values ('input','text','name["   (index)   "]','"   name   "')").ForDOM().execute(); 
"insert into marks (nodename,innerHTML) values ('span','Sex:')".ForDOM().execute(); 
("insert into marks (nodename,type,id,value) values ('input','text','sex["   (index)   "]','"   sex   "')").ForDOM().execute(); 
"insert into marks (nodename,innerHTML) values ('span','Chinese:')".ForDOM().execute(); 
("insert into marks (nodename,type,id,value) values ('input','text','chinese["   (index)   "]','"   chinese   "')").ForDOM().execute(); 
"insert into marks (nodename,innerHTML) values ('span','Math:')".ForDOM().execute(); 
("insert into marks (nodename,type,id,value) values ('input','text','math["   (index)   "]','"   math   "')").ForDOM().execute(); 
"insert into marks (nodename,innerHTML) values ('span','English:')".ForDOM().execute(); 
("insert into marks (nodename,type,id,value) values ('input','text','english["   (index)   "]','"   english   "')").ForDOM().execute(); 
("insert into marks (nodename) values ('br')").ForDOM().execute(); 
}; 

for(var i=0; i<marks.length;i  ) { 
addto(i 2,marks[i].name,marks[i].sex,marks[i].chinese,marks[i].math,marks[i].english); 
}; 

function insertline() { 
var count = "select count(*) as Count from marks where id like 'name%'".ForDOM().query(); 
var index = count[0].Count   1; 
addto(index,"","","","",""); 
}; 

function dellastline() { 
var count = "select count(*) as Count from marks where id like 'name%'".ForDOM().query(); 
var index = count[0].Count; 
("delete from marks where id like '%["  index  "]'").ForDOM().execute(); 
}; 

"create table savedmarks".execute(); 

function savemarks() { 
var names = ("select value from marks where id like 'name%'").ForDOM().query(); 
var sexs = ("select value from marks where id like 'sex%'").ForDOM().query(); 
var chineses = ("select value from marks where id like 'chinese%'").ForDOM().query(); 
var maths = ("select value from marks where id like 'math%'").ForDOM().query(); 
var englishs = ("select value from marks where id like 'english%'").ForDOM().query(); 
"delete from savedmarks".execute(); 
for(var i=0;i<names.length;i  ) { 
("insert into savedmarks (name,sex,chinese,math,english) values ('"  names[i].value  "','"   sexs[i].value   "',"   chineses[i].value   ","   maths[i].value   ","   englishs[i].value   ")").execute(); 
}; 
//alert(savedmarks); 
}; 

function orderby(field,asc) { 
savemarks(); 
var marks = ("select * from savedmarks order by "   field   " "   asc).query(); 
"delete from marks".ForDOM().execute(); 
for(var i=0; i<marks.length;i  ) { 
addto(i 2,marks[i].name,marks[i].sex,marks[i].chinese,marks[i].math,marks[i].english); 
}; 
}; 
function order() { 
var byfield = document.getElementById("byfield").value; 
var ascdesc = document.getElementById("ascdesc").value; 
orderby(byfield,ascdesc); 
}; 
</script> 
</body> 
</html> 

主要用到四个JS库，其中YESBRAIN.js是基库，JSQL.js是接口。JSQL-Memory.js和JSQL-DOM分别是JSQL对 javascript Objects Array 和 Html DOM 的 SQL 实现。

jsql javascript

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn