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 相关文章推荐
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
JavaScript 学习历程和心得分享
2010/12/12 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
Pytorch入门之mnist分类实例
2018/04/14 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
Python如何批量生成和调用变量
2020/11/21 Python
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
普师专业个人自荐信范文
2013/11/26 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
护理中职生求职信范文
2014/02/24 职场文书
美术指导助理求职信
2014/04/20 职场文书
会计个人实习计划书
2014/08/15 职场文书
司机工作自我鉴定
2014/09/19 职场文书
民主评议党员总结
2014/10/20 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
MySQL 数据类型详情
2021/11/11 MySQL
改造DE1103三步曲
2022/04/07 无线电
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技