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


Posted in Javascript onMay 05, 2010
<!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

Javascript 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 #Javascript
JSQL  一个 web DB 的封装
May 05 #Javascript
Javascript JSQL,SQL无处不在,
May 05 #Javascript
Javascript 去除数组的重复元素
May 04 #Javascript
JavaScript中SQL语句的应用实现
May 04 #Javascript
javascript 文章截取部分无损html显示实现代码
May 04 #Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 #Javascript
You might like
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
php简单实现快速排序的方法
2015/04/04 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
python多线程编程中的join函数使用心得
2014/09/02 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Python验证码截取识别代码实例
2020/05/16 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
别名指示符是什么
2012/10/08 面试题
Structs界面控制层技术
2013/10/11 面试题
加工操作管理制度
2014/01/19 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
课程改革实施方案
2014/03/16 职场文书
信仰心得体会
2014/09/05 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
班主任2015新年寄语
2014/12/08 职场文书
教师先进事迹材料
2014/12/16 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
导游词之神仙居景区
2019/11/15 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript