JSQL 基于客户端的成绩统计实现方法

复制代码代码如下:
<！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