Web实战之查询SQL server选课信息，输出表格

2023-07-30 16:29:28

Web实战之查询SQL server选课信息，javascript动态循环输出表格，增加扩课功能

终于开始实战啦，今天我们先来完成教师端对选课信息的查询，首先来看一下运行结果吧。
Web实战之查询SQL server选课信息，输出表格我们可以看到查询内容包括课程编号、课程名称、上课地点、学分、学期、核定人数、选课人数七个查询内容。
我们来看一下整个程序的实现流程。

在html文件中新建表头 页面一打开onload就去执行查询函数 通过while循环根据查询结果动态添加行和列

好嘞，理清楚顺序之后让我们开始操作吧。

在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

我们来查询一下，看看这张表，当当当，就是这样啦。
Web实战之查询SQL server选课信息，输出表格接下来是选课表
一字一句的输入这么多信息，真是有被累到，还好这是小伙伴写的，嘿嘿。

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

Web实战之查询SQL server选课信息，输出表格

写好这张表之后呢，我们就可以开始进行查询操作了，好久没写这么复杂的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！");
  }
 }

好啦，就是这样啦。

上一篇：Linux多线程之pthread_self


下一篇：python中threading开启关闭线程