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 相关文章推荐
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
原生js轮播特效
May 18 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
微信小程序实现的五星评价功能示例
Apr 25 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
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 Undefined index的问题
2009/06/01 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
php提取微信账单的有效信息
2018/10/01 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
永不消失的title提示代码
2007/02/15 Javascript
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
js中日期的加减法
2015/05/06 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
python 队列详解及实例代码
2016/10/18 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
final, finally, finalize的区别
2012/03/01 面试题
宣传策划类求职信范文
2014/01/31 职场文书
企业授权委托书范本
2014/04/02 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle