Web实战之查询SQL server选课信息，javascript动态循环输出表格，增加扩课功能
终于开始实战啦，今天我们先来完成教师端对选课信息的查询，首先来看一下运行结果吧。
我们可以看到查询内容包括课程编号、课程名称、上课地点、学分、学期、核定人数、选课人数七个查询内容。
我们来看一下整个程序的实现流程。
好嘞，理清楚顺序之后让我们开始操作吧。
在HTML文件中新建表头信息
这个其实就是建一个表格了，使用table标签就可以啦，不要忘记给它一个id哦，直接看代码吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大学生网上选课系统</title>
<script type="text/javascript" src="js/search.js"charset="utf-8"></script>
</head>
<body>
<div class="contain">
<table id="mytable" cellspacing="0px" border="3" bordercolor="red">
<tr>
<td class="s_top">课程编号</td>
<td class="s_top">课程名称</td>
<td class="s_top">上课地点</td>
<td class="s_top">学分</td>
<td class="s_top">学期</td>
<td class="s_top">核定人数</td>
<td class="s_top">选课人数</td>
</tr>
</table>
<span class="span1">课程编号</span><input id="id2" type="text"/><br>
<span class="span1">扩选人数</span><input id="rise" type="text"/><br>
<input class="but" type="button" value="扩课" onclick="add()"/>
</div>
</body>
</html>
< tr>表示行
< td>表示列
页面打开执行查询操作
因为我们想要打开页面就看到选课结果，所以这里就每天添加按钮什么的，直接通过javascript函数编写了。
首先我们来看看SQLserver里面已经建好的开课表Course和选课表。
为什么是两张表呢，因为我们首先要根据开课表知道这个编号0101的老师开设了哪些课程以及这些课程信息，然后再根据选课表获得分别选这些课程的学生数量，所以我们要建立两张表。
首先是开课表
drop table Course
create table Course
(
id char(8) not null,/*课程号*/ /*可以直接指定主键*/
tid char(8) not null,/*老师工号*/
name char(20) not null,/*课程名字*/
wkd int not null,/*星期*/
sksj int not null,/*上课时间*/
sc int not null,/*时长*/
dd char(30) not null,/*地点*/
xf int not null,/*学分*/
xs int not null,/*学时*/
xq char(20) not null,/*学期*/
rs int not null,/*人数*/
flag int not null,/*标识选课*/
foreign key(tid) references Teacher(id),
primary key(tid,id,xq),/*联合主键*/
);
insert into Course(id,tid,name,wkd,sksj,sc,dd,xf,xs,xq,rs,flag)values('08305001','0103','离散数学',1,5,4,'计算机学院304',4,40,'2012-2013秋季',60,3);
insert into Course(id,tid,name,wkd,sksj,sc,dd,xf,xs,xq,rs,flag)values('08305001','0103','离散数学',1,5,4,'计算机学院304',4,40,'2012-2013冬季',60,3);
insert into Course(id,tid,name,wkd,sksj,sc,dd,xf,xs,xq,rs,flag)values('08305002','0101','数据库原理',3,1,4,'材料学院304',4,40,'2012-2013冬季',100,3);
insert into Course(id,tid,name,wkd,sksj,sc,dd,xf,xs,xq,rs,flag)values('08305002','0102','数据库原理',3,1,4,'材料学院306',4,40,'2012-2013冬季',100,3);
insert into Course(id,tid,name,wkd,sksj,sc,dd,xf,xs,xq,rs,flag)values('08305002','0103','数据库原理',3,1,4,'材料学院308',4,40,'2012-2013冬季',100,3);
insert into Course(id,tid,name,wkd,sksj,sc,dd,xf,xs,xq,rs,flag)values('08305003','0102','数据结构',5,5,4,'材料学院308',4,40,'2012-2013冬季',50,3);
insert into Course(id,tid,name,wkd,sksj,sc,dd,xf,xs,xq,rs,flag)values('08305004','0101','系统结构',2,1,4,'材料学院308',6,40,'2013-2014秋季',60,3);
insert into Course(id,tid,name,wkd,sksj,sc,dd,xf,xs,xq,rs,flag)values('08301001','0102','分子物理学',1,5,4,'材料学院304',4,40,'2013-2014秋季',40,3);
insert into Course(id,tid,name,wkd,sksj,sc,dd,xf,xs,xq,rs,flag)values('08302001','0201','通信学',1,5,3,'材料学院204',3,30,'2013-2014冬季',50,3);
select * from Course
我们来查询一下，看看这张表，当当当，就是这样啦。
接下来是选课表
一字一句的输入这么多信息，真是有被累到，还好这是小伙伴写的，嘿嘿。
drop table Choose
create table Choose
(
sid char(8) not null ,/*学生号*/
tid char(8) not null,/*老师工号*/
cid char(8) not null ,/*课程工号*/
name char(20) not null,/*名字*/
grade int,/*成绩*/
xq char(20) not null,/*学期*/
foreign key(sid) references Student(id),
foreign key(tid) references Teacher(id),
primary key(sid,tid,cid,xq)/*联合主键*/
);
insert into Choose(sid,cid,tid,name,grade,xq)values( '1101','08305001','0103','离散数学',60,'2012-2013秋季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1102','08305001','0103','离散数学',87,'2012-2013秋季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1102','08305002','0101','数据库原理',82,'2012-2013冬季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1102','08305004','0101','系统结构',null,'2012-2013冬季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1103','08305001','0103','离散数学',56,'2012-2013冬季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1103','08305002','0102','数据库原理',75,'2012-2013冬季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1103','08305003','0102','数据结构',84,'2012-2013冬季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1103','08305001','0102','离散数学',null,'2013-2014秋季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1103','08305004','0101','系统结构',null,'013-2014秋季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1104','08305001','0103','离散数学',74,'2012-2013秋季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1104','08302001','0201','通信学',null,'2013-2014冬季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1106','08305001','0103','离散数学',85,'2012-2013秋季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1106','08305002','0103','数据库原理',66,'2012-2013冬季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1107','08305001','0103','离散数学',90,'2012-2013秋季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1107','08305003','0102','数据结构',79,'2012-2013冬季');
insert into Choose(sid,cid,tid,name,grade,xq)values( '1107','08305004','0101','系统结构',null,'2013-2014秋季')
select * from Choose
写好这张表之后呢，我们就可以开始进行查询操作了，好久没写这么复杂的SQL查询语句了，真的是被难到了，挠挠头。好在笔者吃好喝好，终于唤起了年前的记忆。真的是蛮长的，毕竟要同时查两张表。
// An highlighted block
SELECT id,count(sid) c,c1.name,dd,xf,c1.xq,rs FROM Course c1,Choose c2 where c1.tid='0101'and c1.tid=c2.tid and c1.id=c2.cid GROUP By id,c1.name,dd,xf,c1.xq,rs
好嘞接下来正式开始查询操作。步骤还是那么单调，先建立与数据库的连接，然后运行查询语句，然后while循环输出查询结果。
建立与数据库的连接，大家应该都没什么问题了，之前有篇博客详细讲过，
有兴趣的话大家可以参考一下，自认为还是蛮详细的，有问题可以私信我哦。
javascript连接SQLserver：https://blog.csdn.net/weixin_46570668/article/details/113575718.
VScode连接SQLserver：https://blog.csdn.net/weixin_46570668/article/details/113257966.
因为我们的查询结果有许多条，所以我们用一个while循环，只要结果不为空，就输出查询信息，然后通过moveNext()移动到下一条查询结果。
一定要注意，在执行扩课函数之后，不要忘记刷新一下HTML页面哦，执行location.reload()就可以啦，不然的话，虽然已经更改了数据库信息，但是我们看不到结果，很容易产生焦虑情绪哦。
那么接下来让我们看看函数部分
window.onload = function()
{
function $(id) {
return document.getElementById(id);
}
var conn = new ActiveXObject("ADODB.Connection");
var rs = new ActiveXObject("ADODB.Recordset");
var strdsn = "Driver={SQL Server};SERVER=DESKTOP-U4DC9JE;UID=sa;PWD=;DATABASE=school";
var sql = "SELECT id,count(sid) c,c1.name,dd,xf,c1.xq,rs FROM Course c1,Choose c2 where c1.tid='0101'and c1.tid=c2.tid and c1.id=c2.cid GROUP By id,c1.name,dd,xf,c1.xq,rs";
try {
conn.Open(strdsn);
}
catch (e) {
alert(e.message);
}
rs.open(sql,conn);
var name="";
var id="";
var dd="";
var xf;
var xq="";
var rsh;
var count;
while(!rs.EOF)
{
id=rs("id");
name=rs("name");
dd=rs("dd");
xf=rs("xf");
xq=rs("xq");
rsh=rs("rs");
count=rs("c");
var tableRow=$("mytable").insertRow(1);
var Cell_0=tableRow.insertCell(0);
Cell_0.innerHTML='<input value="'+id+'" readonly="true"/>';
Cell_0.className="s1";
var Cell_1=tableRow.insertCell(1);
Cell_1.innerHTML='<input value="'+name+'" readonly="true"/>';
Cell_1.className="s2";
var Cell_2=tableRow.insertCell(2);
Cell_2.innerHTML='<input value="'+dd+'" readonly="true"/>';
Cell_2.className="s3";
var Cell_3=tableRow.insertCell(3);
Cell_3.innerHTML='<input value="'+xf+'" readonly="true"/>';
Cell_3.className="s4";
var Cell_4=tableRow.insertCell(4);
Cell_4.innerHTML='<input value="'+xq+'" readonly="true"/>';
Cell_4.className="s5";
var Cell_5=tableRow.insertCell(5);
Cell_5.innerHTML='<input value="'+rsh+'" readonly="true"/>';
Cell_5.className="s6";
var Cell_6=tableRow.insertCell(6);
Cell_6.innerHTML='<input value="'+count+'" readonly="true"/>';
Cell_6.className="s7";
rs.moveNext();
}
}
function add(){
id=$('#id2').val();
id=id.trim();
var rise=$('#rise').val();
rise=rise.trim();
var j = parseInt(rise);
if(j>0)
{
var conn = new ActiveXObject("ADODB.Connection");
var strdsn = "Driver={SQL Server};SERVER=DESKTOP-U4DC9JE;UID=sa;PWD=mtch1997214;DATABASE=school";
var sql = "UPDATE Course SET rs=rs+"+ j+" where id='"+ id+"'";
try {
conn.Open(strdsn);
}
catch (e) {
alert(e.message);
}
alert("打开数据库");
try {
conn.execute(sql);
}
catch (e) {
alert(e.description);
}
alert("成功啦");
location.reload();
}
else
{
alert("扩选人数必须大于0！");
}
}
好啦，就是这样啦。
扫一扫
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
