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数组的操作详解
Mar 27 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
JS图片预加载插件详解
Jun 21 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
js实现超级玛丽小游戏
Mar 18 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
vue render函数动态加载img的src路径操作
Oct 26 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调用数据库的存贮过程
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
10款实用的PHP开源工具
2015/10/23 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
js类 from qq
2006/11/13 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python装饰器用法实例总结
2018/02/07 Python
python实现简单flappy bird
2018/12/24 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
python中实现词云图的示例
2020/12/19 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
班级文化建设标语
2014/06/23 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android