• 售前

  • 售后

热门帖子
入门百科

JavaScript+HTML实现门生信息管理体系

[复制链接]
恶贯满瘾锥 显示全部楼层 发表于 2021-10-26 13:46:25 |阅读模式 打印 上一主题 下一主题
目次


  • 一、媒介
  • 二、效果图
  • 三、代码
  • 四、门生信息管理体系主界面

一、媒介

用数组来存储全部门生对象的信息,实现了双向更新,初始时(数组内的对象信息“添补界面”),背面的界面利用可以更新数组内对象的信息(数目和本身数据域信息)。
优点:JQuery代码处理的许多细节较好。
利用HTML5的pattern+正则表达式,实现表单验证以及相应提示。
缺点:背景删除门生对象的信息代码处理服从较低(“假”删除:移动门生对象索引的位置+变更数组长度)。
CSS部门——界面的缩放存在问题。(没操持走前端/临时懒得修改)。.
部门代码可以更好的处理已达到复用的目的,未处理。

二、效果图



三、代码

没有删去写代码过程中做改进之前的代码,看上去代码有点长(保存了写代码的思索过程)

删去表明白的代码以及一些不须要的内容,代码也不是太长。

HTML:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Student Information Management System</title>
  6.     <script src="../../../JQuery/JQuery.js"></script>
  7.     <link rel="stylesheet" href="../studentInformationManagementSystemCss/studentInformationManagementSystem.css" rel="external nofollow" >
  8.     <script src="../studentInformationManagementSystemJs/studentInformationManagementSystem.js"></script>
  9. </head>
  10. <body>
  11. <div>
  12.     <header>
  13.         <hr/>
  14.         <h1>学生信息管理系统</h1>
  15.         <hr/>
  16.     </header>
  17.     <main>
  18.         <div>
  19.             <div id="adbt">
  20.                 <button class="gre" id="add">新增</button>
  21.                 <button class="red" id="delete">删除</button>
  22.             </div>
  23.             <table>
  24.                 <tbody>
  25.                 <tr id="thead">
  26.                     <td><input type="checkbox"></td>
  27.                     <td>序号</td>
  28.                     <td>学号</td>
  29.                     <td>姓名</td>
  30.                     <td>学院</td>
  31.                     <td>专业</td>
  32.                     <td>年级</td>
  33.                     <td>班级</td>
  34.                     <td>年龄</td>
  35.                     <td>操作</td>
  36.                 </tr>
  37.                 <!--<tr>
  38.                     <td name="abc"><input type="checkbox"></td>
  39.                     <td>1</td>
  40.                     <td>11503080201</td>
  41.                     <td>张三</td>
  42.                     <td>计算机科学与工程学院</td>
  43.                     <td>软件工程</td>
  44.                     <td>2015</td>
  45.                     <td>2</td>
  46.                     <td>21</td>
  47.                     <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
  48.                 </tr>
  49.                 <tr>
  50.                     <td><input type="checkbox"></td>
  51.                     <td>2</td>
  52.                     <td>11503080202</td>
  53.                     <td>李四</td>
  54.                     <td>会计学院</td>
  55.                     <td>会计学</td>
  56.                     <td>2015</td>
  57.                     <td>1</td>
  58.                     <td>19</td>
  59.                     <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
  60.                 </tr>
  61.                 <tr>
  62.                     <td><input type="checkbox"></td>
  63.                     <td>3</td>
  64.                     <td>11503080203</td>
  65.                     <td>王二</td>
  66.                     <td>理学院</td>
  67.                     <td>数学</td>
  68.                     <td>2015</td>
  69.                     <td>1</td>
  70.                     <td>19</td>
  71.                     <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
  72.                 </tr>
  73.                 <tr>
  74.                     <td><input type="checkbox"></td>
  75.                     <td>4</td>
  76.                     <td>11503080204</td>
  77.                     <td>张三</td>
  78.                     <td>计算机科学与工程学院</td>
  79.                     <td>软件工程</td>
  80.                     <td>2015</td>
  81.                     <td>2</td>
  82.                     <td>21</td>
  83.                     <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
  84.                 </tr>
  85.                 <tr>
  86.                     <td><input type="checkbox"></td>
  87.                     <td>5</td>
  88.                     <td>11503080205</td>
  89.                     <td>李四</td>
  90.                     <td>会计学院</td>
  91.                     <td>会计学</td>
  92.                     <td>2015</td>
  93.                     <td>1</td>
  94.                     <td>19</td>
  95.                     <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
  96.                 </tr>
  97.                 <tr>
  98.                     <td><input type="checkbox"></td>
  99.                     <td>6</td>
  100.                     <td>11503080206</td>
  101.                     <td>王二</td>
  102.                     <td>理学院</td>
  103.                     <td>数学</td>
  104.                     <td>2015</td>
  105.                     <td>1</td>
  106.                     <td>19</td>
  107.                     <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
  108.                 </tr>
  109.                 <tr>
  110.                     <td><input type="checkbox"></td>
  111.                     <td>7</td>
  112.                     <td>11503080207</td>
  113.                     <td>张三</td>
  114.                     <td>计算机科学与工程学院</td>
  115.                     <td>软件工程</td>
  116.                     <td>2015</td>
  117.                     <td>2</td>
  118.                     <td>21</td>
  119.                     <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
  120.                 </tr>
  121.                 <tr>
  122.                     <td><input type="checkbox"></td>
  123.                     <td>8</td>
  124.                     <td>11503080208</td>
  125.                     <td>李四</td>
  126.                     <td>会计学院</td>
  127.                     <td>会计学</td>
  128.                     <td>2015</td>
  129.                     <td>1</td>
  130.                     <td>19</td>
  131.                     <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
  132.                 </tr>
  133.                 <tr>
  134.                     <td><input type="checkbox"></td>
  135.                     <td>9</td>
  136.                     <td>11503080209</td>
  137.                     <td>王二</td>
  138.                     <td>理学院</td>
  139.                     <td>数学</td>
  140.                     <td>2015</td>
  141.                     <td>1</td>
  142.                     <td>19</td>
  143.                     <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
  144.                 </tr>
  145.                 <tr>
  146.                     <td><input type="checkbox"></td>
  147.                     <td>10</td>
  148.                     <td>11503080210</td>
  149.                     <td>张三</td>
  150.                     <td>计算机科学与工程学院</td>
  151.                     <td>软件工程</td>
  152.                     <td>2015</td>
  153.                     <td>2</td>
  154.                     <td>21</td>
  155.                     <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
  156.                 </tr>-->
  157.                 </tbody>
  158.             </table>
  159.             <div id="navigate">
  160.                 <p>第<span id="pgn"></span>页,共<span id="en"></span>条 (每页最多显示10条)</p><!--Number of entries-->
  161.                 <div id="tpbt">
  162.                     <button class="gre" id="lastpage">上一页</button>
  163.                     <button class="red" id="nextpage">下一页</button>
  164.                 </div>
  165.             </div>
  166.         </div>
  167.     </main>
  168. </div>
  169. <div id="sbg"></div><!--增删改查时的阴影背景-->
  170. <div class="achaesi" id="asi">
  171. <!--    <form action="" method="post">-->
  172.     <h2>新增学生信息</h2>
  173.     <div class="ifm">
  174.         <div><label for="assn">学号</label> <input id="assn" type="text" placeholder="11503080201" required="required" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('请输入11位的数字组合')"></div>
  175.         <div><label for="asn">姓名</label> <input id="asn" type="text" placeholder="雷军" required="required" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的姓名')"></div>
  176.         <div><label for="asac">学院</label> <input id="asac" type="text" placeholder="两江人工智能学院" required="required" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的学院名')"></div>
  177.         <div><label for="asm">专业</label> <input id="asm" type="text" placeholder="软件工程" required="required" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的专业名')"></div>
  178.         <div><label for="asg">年级</label> <input id="asg" type="text" placeholder="2015" required="required" max="2020" maxlength="4" pattern="^[0-9]{4}$" oninvalid="setCustomValidity('请输入正确的年级')"></div>
  179.         <div><label for="asc">班级</label> <input id="asc" type="text" placeholder="1" required="required" maxlength="1"></div>
  180.         <div><label for="asag">年龄</label> <input id="asag" type="number" placeholder="20" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('请输入正确的年龄')"></div>
  181.     </div>
  182.     <hr/>
  183.     <div class="scbt">
  184.         <button type="submit" id="submit">提交</button>
  185.         <button class="cancel">取消</button>
  186.     </div>
  187. <!--    </form>-->
  188. </div>
  189. <div class="achaesi" id="chasi">
  190. <!--    <form action="" method="post">-->
  191.     <h2>修改学生信息</h2>
  192.     <div class="ifm">
  193.         <div><label for="chassn">学号</label> <input id="chassn" type="text" readonly required="required" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('请输入11位的数字组合')"></div>
  194.         <div><label for="chasn">姓名</label> <input id="chasn" type="text" required="required" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的姓名')"></div>
  195.         <div><label for="chasac">学院</label> <input id="chasac" type="text" required="required" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的学院名')"></div>
  196.         <div><label for="chasm">专业</label> <input id="chasm" type="text" required="required" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的专业名')"></div>
  197.         <div><label for="chasg">年级</label> <input id="chasg" type="text" required="required" max="2020" maxlength="4" pattern=^[0-9]{4}$" oninvalid="setCustomValidity('请输入正确的年级')"></div>
  198.         <div><label for="chasc">班级</label> <input id="chasc" type="text" required="required" maxlength="1"></div>
  199.         <div><label for="chasag">年龄</label> <input id="chasag" type="text" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('请输入正确的年龄')"></div>
  200.     </div>
  201.     <hr/>
  202.     <div class="scbt">
  203.         <button type="submit" id="save">保存</button>
  204.         <button class="cancel">取消</button>
  205.     </div>
  206. <!--    </form>-->
  207. </div>
  208. <div class="achaesi" id="chesi">
  209.     <h2>查看学生信息</h2>
  210.     <div class="ifm">
  211.         <div><label for="chessn">学号</label> <input type="text" readonly id="chessn"></div>
  212.         <div><label for="chesn">姓名</label> <input type="text" readonly id="chesn"></div>
  213.         <div><label for="chesac">学院</label> <input type="text" readonly id="chesac"></div>
  214.         <div><label for="chesm">专业</label> <input type="text" readonly id="chesm"></div>
  215.         <div><label for="chesg">年级</label> <input type="text" readonly id="chesg"></div>
  216.         <div><label for="chesc">班级</label> <input type="text" readonly id="chesc"></div>
  217.         <div><label for="chesag">年龄</label> <input type="text" readonly id="chesag"></div>
  218.     </div>
  219.     <hr/>
  220.     <div class="scbt">
  221.         <button class="cancel">取消</button>
  222.     </div>
  223. </div>
  224. </body>
  225. </html>
复制代码
CSS:
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. a {
  6.   text-decoration: none;
  7.   color: red;
  8. }
  9. .sbg {
  10.   position: absolute;
  11.   top: 0;
  12.   width: 100%;
  13.   height: 100%;
  14.   background-color: black;
  15.   opacity: 0.4;
  16.   z-index: 1;
  17. }
  18. body {
  19.   background-color: #f0ece9;
  20. }
  21. header {
  22.   display: flex;
  23.   flex-flow: row nowrap;
  24.   justify-content: space-between;
  25. }
  26. header h1 {
  27.   color: #9a9897;
  28. }
  29. header hr {
  30.   margin: 20px 20px 0;
  31.   background-color: #bc9470;
  32.   border: 2px solid #bc9470;
  33.   width: 30%;
  34.   height: 0;
  35. }
  36. main #adbt {
  37.   margin-left: 70px;
  38. }
  39. main button {
  40.   margin: 20px 5px;
  41.   width: 85px;
  42.   height: 40px;
  43.   color: white;
  44. }
  45. main button.gre {
  46.   background-color: #5cb85c;
  47. }
  48. main button.red {
  49.   background-color: #d9534f;
  50. }
  51. main #navigate {
  52.   padding: 0 70px;
  53.   display: flex;
  54.   flex-flow: row nowrap;
  55.   justify-content: space-between;
  56. }
  57. main #navigate p {
  58.   margin-top: 30px;
  59. }
  60. table {
  61.   margin: 0 auto;
  62.   width: 90%;
  63.   text-align: center;
  64.   border-spacing: 0;
  65. }
  66. table tbody tr:first-of-type {
  67.   background-color: #dadee1 !important;
  68.   height: 60px;
  69. }
  70. table tbody tr {
  71.   height: 45px;
  72. }
  73. table tbody tr:nth-child(odd) {
  74.   background-color: #eef1f8;
  75. }
  76. table tbody tr:nth-child(even) {
  77.   background-color: #ffffff;
  78. }
  79. table tbody tr:not([id=thead]):hover {
  80.   cursor: pointer;
  81.   background-color: #e9e9e9;
  82. }
  83. .achaesi {
  84.   display: none;
  85.   position: absolute;
  86.   top: 20%;
  87.   left: 34%;
  88.   background-color: white;
  89.   z-index: 2;
  90.   width: 500px;
  91.   height: 420px;
  92. }
  93. .achaesi h2 {
  94.   padding: 5px 20px;
  95.   font-size: large;
  96.   background-color: #555555;
  97.   color: white;
  98. }
  99. .achaesi .ifm {
  100.   width: 300px;
  101.   margin: 10px auto;
  102.   display: flex;
  103.   flex-flow: column nowrap;
  104. }
  105. .achaesi .ifm div {
  106.   margin: 10px;
  107. }
  108. .achaesi .ifm div input {
  109.   width: 220px;
  110.   height: 20px;
  111. }
  112. .achaesi .scbt {
  113.   float: right;
  114.   margin-top: 6px;
  115.   margin-right: 30px;
  116. }
  117. .achaesi .scbt button:first-of-type {
  118.   width: 85px;
  119.   height: 36px;
  120.   background-color: #5cb85c;
  121. }
  122. .achaesi .scbt button:last-of-type {
  123.   width: 85px;
  124.   height: 36px;
  125.   background-color: white;
  126. }
  127. /*# sourceMappingURL=studentInformationManagementSystem.css.map */
复制代码
JS:
  1. $(function () {
  2.     let students = [{//初始界面数据
  3.         schoolNumber: "11503080201",
  4.         name: "雷军",//my idol
  5.         academy: "两江人工智能学院",
  6.         major: "软件工程",
  7.         grade: 2019,
  8.         class: 2,
  9.         age: 20,
  10.     }, {
  11.         schoolNumber: "11503080202",
  12.         name: "张三",
  13.         academy: "计算机工程与技术学院",
  14.         major: "计算机科学与技术",
  15.         grade: 2019,
  16.         class: 1,
  17.         age: 19,
  18.     }, {
  19.         schoolNumber: "11503080203",
  20.         name: "李四",
  21.         academy: "会计学院",
  22.         major: "会计学",
  23.         grade: 2018,
  24.         class: 3,
  25.         age: 19,
  26.     }, {
  27.         schoolNumber: "11503080204",
  28.         name: "王五",
  29.         academy: "理学院",
  30.         major: "应用物理",
  31.         grade: 2017,
  32.         class: 3,
  33.         age: 21,
  34.     }, {
  35.         schoolNumber: "11503080204",
  36.         name: "赵六",
  37.         academy: "会计学院",
  38.         major: "金融学",
  39.         grade: 2017,
  40.         class: 3,
  41.         age: 21,
  42.     }, {
  43.         schoolNumber: "11503080202",
  44.         name: "张三",
  45.         academy: "计算机工程与技术学院",
  46.         major: "计算机科学与技术",
  47.         grade: 2019,
  48.         class: 1,
  49.         age: 19,
  50.     }, {
  51.         schoolNumber: "11503080203",
  52.         name: "李四",
  53.         academy: "会计学院",
  54.         major: "会计学",
  55.         grade: 2018,
  56.         class: 3,
  57.         age: 19,
  58.     }, {
  59.         schoolNumber: "11503080204",
  60.         name: "王五",
  61.         academy: "理学院",
  62.         major: "应用物理",
  63.         grade: 2017,
  64.         class: 3,
  65.         age: 21,
  66.     }, {
  67.         schoolNumber: "11503080204",
  68.         name: "赵六",
  69.         academy: "会计学院",
  70.         major: "金融学",
  71.         grade: 2017,
  72.         class: 3,
  73.         age: 21,
  74.     }, {
  75.         schoolNumber: "11503080202",
  76.         name: "张三",
  77.         academy: "计算机工程与技术学院",
  78.         major: "计算机科学与技术",
  79.         grade: 2019,
  80.         class: 1,
  81.         age: 19,
  82.     }, {
  83.         schoolNumber: "11503080203",
  84.         name: "李四",
  85.         academy: "会计学院",
  86.         major: "会计学",
  87.         grade: 2018,
  88.         class: 3,
  89.         age: 19,
  90.     }, {
  91.         schoolNumber: "11503080204",
  92.         name: "王五",
  93.         academy: "理学院",
  94.         major: "应用物理",
  95.         grade: 2017,
  96.         class: 3,
  97.         age: 21,
  98.     }, {
  99.         schoolNumber: "11503080204",
  100.         name: "赵六",
  101.         academy: "会计学院",
  102.         major: "金融学",
  103.         grade: 2017,
  104.         class: 3,
  105.         age: 21,
  106.     }];
  107.     let page = 1;//第几页
  108.     let no = 0;//显示的页数的第一个对象是数组中的第几个对象,初始下标为0
  109.     let stuNumber = students.length;
  110.     for (let i = 0; i < 10; i++) {//初始页面信息显示
  111.         let student = $("<tr>" + "<td><input type="checkbox"></td>" + "<td>" + (i + 1) + "</td>" + "<td>" + students[i].schoolNumber + "</td>" + "<td>" + students[i].name + "</td>" + "<td>" + students[i].academy + "</td>" + "<td>" + students[i].major + "</td>" + "<td>"
  112.             + students[i].grade + "</td>" + "<td>" + students[i].class + "</td>" + "<td>" + students[i].age + "</td>" + "<td><a href="javascript:;" class="check">查看</a> <a href="javascript:;" class="modify">修改</a></td>" + "</label></tr>");
  113.         $("tbody").append(student);
  114.     }
  115.     $("tbody").trigger("create");//trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)
  116.     $("#pgn").text(page);
  117.     $("#en").text(stuNumber);
  118.     $("#add").click(function () {//点击新增按钮触发的动作
  119.         $("#sbg").addClass("sbg");
  120.         $("#asi").show();
  121.     });
  122.     let objKeys = ["schoolNumber", "name", "academy", "major", "grade", "class", "age"];
  123.     $("#submit").click(function () {//提交按钮点击触发的动作
  124.         let student = {};
  125.         let isEmpty = false;
  126.         $("#asi").find("input").each(function (index, domEle) {
  127.             if (!domEle.value) {//如果添加时表单内有值为空,则不进行添加
  128.                 isEmpty = true;
  129.                 /*return;*/
  130.             }
  131.             student[objKeys[index]] = domEle.value;
  132.         });
  133.         if (!isEmpty) {
  134.             students[stuNumber] = student;
  135.             stuNumber++;
  136.             $("#en").text(stuNumber);
  137.             /*$("#sbg").removeClass("sbg");
  138.             $("#asi").hide();*/
  139.             // $("tbody tr:first").siblings().remove();//清空界面
  140.             let lpren = $("tbody tr").length - 1;//最后一页剩余的条目数;
  141.             if (no + 10 > stuNumber && lpren < 10) {//增加一个append函数,如果显示的是最后一页那么需要更新界面。
  142.                 $("tbody tr:last").after("<tr>" + "<td><input type="checkbox"></td>" + "<td>" + (no + lpren + 1) + "</td>" + "<td>" + student.schoolNumber + "</td>" + "<td>" + student.name + "</td>" + "<td>" + student.academy + "</td>" + "<td>" + student.major + "</td>" + "<td>"
  143.                     + student.grade + "</td>" + "<td>" + student.class + "</td>" + "<td>" + student.age + "</td>" + "<td><a href="javascript:;" class="check">查看</a> <a href="javascript:;" class="modify">修改</a></td>" + "</tr>");
  144.                 /*            let i = 0;
  145.                             while (i < 10 && no + i < stuNumber) {
  146.                                 let student = $("<tr>" + "<td><input type="checkbox"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
  147.                                     + students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href="javascript:;" class="check">查看</a> <a href="javascript:;" class="modify">修改</a></td>" + "</tr>");
  148.                                 $("tbody").append(student);
  149.                                 i++;
  150.                             }*/
  151.             }
  152.         }
  153.         $("#sbg").removeClass("sbg");
  154.         $("#asi").hide();
  155.     });
  156.     $("tbody").on("click", ".check", function () {//点击查看按钮触发的动作
  157.         $("#sbg").addClass("sbg");
  158.         $("#chesi").show();
  159.         let stuIndex = $(this).parent().parent().find("td")[1].innerText - 1;
  160.         // let i = 0;
  161.         $("#chesi").find("input").each(function (index, domEle) {
  162.             domEle.value = students[stuIndex][objKeys[index]];//index->i
  163.         });
  164.     });
  165.     let modifyNumber;
  166.     /* $(".modify").click(function () {//jQuery出现的新添加元素点击事件无效
  167.          $("#sbg").addClass("sbg");
  168.          $("#chasi").show();
  169.          modifyNumber = $(this).parent().parent().find("td")[1].innerText - 1;
  170.          let i = 0;
  171.          $("#chasi").find("input").each(function (index, domEle) {
  172.              domEle.value = students[modifyNumber][objKeys[i++]];
  173.          });
  174.      });*/
  175.     $("tbody").on("click", ".modify", function () {//点击修改按钮触发的动作,解决了jQuery出现的新添加元素点击事件无效问题
  176.         $("#sbg").addClass("sbg");
  177.         $("#chasi").show();
  178.         modifyNumber = $(this).parent().parent().find("td")[1].innerText - 1;
  179.         let i = 0;
  180.         $("#chasi").find("input").each(function (index, domEle) {
  181.             domEle.value = students[modifyNumber][objKeys[i++]];
  182.         });
  183.     });
  184.     $("#save").click(function () {//点击保存按钮触发的动作
  185.         $("#chasi").find("input").each(function (index, domEle) {
  186.             if (domEle.value)
  187.                 students[modifyNumber][objKeys[index]] = domEle.value;
  188.         });
  189.         $("tbody tr").eq(modifyNumber - no + 1).remove();
  190.         $("tbody tr").eq(modifyNumber - no).after("<tr>" + "<td><input type="checkbox"></td>" + "<td>" + (modifyNumber - no + 1) + "</td>" + "<td>" + students[modifyNumber].schoolNumber + "</td>" + "<td>" + students[modifyNumber].name + "</td>" + "<td>" + students[modifyNumber].academy + "</td>" + "<td>" + students[modifyNumber].major + "</td>" + "<td>"
  191.             + students[modifyNumber].grade + "</td>" + "<td>" + students[modifyNumber].class + "</td>" + "<td>" + students[modifyNumber].age + "</td>" + "<td><a href="javascript:;" class="check">查看</a> <a href="javascript:;" class="modify">修改</a></td>" + "</tr>");
  192.         /*$("tbody tr:first").siblings().remove();//清空界面
  193.         for (let i = no; i < no+10; i++) {//初始页面信息显示
  194.             let student = $("<tr>" + "<td><input type="checkbox"></td>" + "<td>" + (i + 1) + "</td>" + "<td>" + students[i].schoolNumber + "</td>" + "<td>" + students[i].name + "</td>" + "<td>" + students[i].academy + "</td>" + "<td>" + students[i].major + "</td>" + "<td>"
  195.                 + students[i].grade + "</td>" + "<td>" + students[i].class + "</td>" + "<td>" + students[i].age + "</td>" + "<td><a href="javascript:;" class="check">查看</a> <a href="javascript:;" class="modify">修改</a></td>" + "</tr>");
  196.             $("tbody").append(student);
  197.         }
  198.         $("tbody").trigger("create");*/
  199.         $("#sbg").removeClass("sbg");
  200.         $("#chasi").hide();
  201.     });
  202.     $(".cancel").click(function () {//多个取消按钮点击触发的动作
  203.         $("#sbg").removeClass("sbg");
  204.         $(".achaesi").hide();
  205.     });
  206.     $("tbody tr td:first").click(function () {//全选操作用到了JQuery的隐示迭代
  207.         $("tbody tr td input").prop("checked", $("tbody tr:first td:first input").prop("checked"));
  208.     });
  209.     $("tbody").on("click", $("tbody tr:nth-of-type(1)").siblings().find("input"), function () {
  210.         let isSelectAll = true;
  211.         $("tbody tr:nth-of-type(1)").siblings().find("input").each(function (index, domEle) {
  212.             if ($(domEle).prop("checked") == false)
  213.                 isSelectAll = false;
  214.         });
  215.         $("tbody tr:first td:first input").prop("checked", isSelectAll);
  216.     })
  217.     let update = (no) => {
  218.         let i = 0;//用于增加信息条目的变量;
  219.         $("tbody tr:first").siblings().remove();//清空界面
  220.         while (i < 10 && no + i < stuNumber) {
  221.             let student = $("<tr>" + "<td><input type="checkbox"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
  222.                 + students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href="javascript:;" class="check">查看</a> <a href="javascript:;" class="modify">修改</a></td>" + "</tr>");
  223.             $("tbody").append(student);
  224.             i++;
  225.         }
  226.         $("tbody").trigger("create");
  227.     }
  228.     $("#delete").click(function () {
  229.         if (confirm("确认要删除这些信息吗?")) {
  230.             let delNumber = 0;//删除的信息条目数;
  231.             let delIndexs = []; //删除信息条目的下标;用于后期处理避免“落空”导致移动无效
  232.             // let i = 0;//用于增加信息条目的变量;
  233.             $("tbody tr td input").each(function (index, domEle) {
  234.                 if (index != 0 && $(domEle).prop("checked")) {//index != 0,防止标题行被删除
  235.                     delIndexs[delIndexs.length] = $(domEle).parent().next().text() - 1;
  236.                     $(domEle).parent().parent().remove();
  237.                     delNumber++;
  238.                 }
  239.             });
  240.             for (let j = delIndexs.length - 1; j >= 0; j--) {
  241.                 for (let k = delIndexs[j]; k < stuNumber - 1; k++) {//低效的代码,需要大量移动对象索引;对JS不太熟悉,还没有想到高效的解决办法!
  242.                     students[k] = students[k + 1];
  243.                 }
  244.             }
  245.             stuNumber -= delNumber;//指向储存底层数据(学生对象)的数组尾部的指针“移动”
  246.             $("#en").text(stuNumber);//更新条目数
  247.             if (stuNumber == no) {
  248.                 no -= 10;
  249.                 page--;
  250.                 $("#pgn").text(page);
  251.             }
  252.             update(no);
  253.             /*            $("tbody tr:first").siblings().remove();//清空界面
  254.                         while (i < 10 && no + i < stuNumber) {
  255.                             let student = $("<tr>" + "<td><input type="checkbox"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
  256.                                 + students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href="javascript:;" class="check">查看</a> <a href="javascript:;" class="modify">修改</a></td>" + "</tr>");
  257.                             $("tbody").append(student);
  258.                             i++;
  259.                         }
  260.                         $("tbody").trigger("create");*/
  261.             $("tbody tr td:first input").prop("checked", false);
  262.         }
  263.     });
  264.     $("#nextpage").click(function () {
  265.         if (no + 10 < stuNumber) {
  266.             no += 10;
  267.             page++;
  268.             $("#pgn").text(page);
  269.             update(no);
  270.             $("tbody tr:first td:first input").prop("checked", false);
  271.             /*let i = 0;//用于增加信息条目的变量;
  272.             $("tbody tr:first").siblings().remove();//清空界面
  273.             while (i < 10 && no + i < stuNumber) {
  274.                 let student = $("<tr>" + "<td><input type="checkbox"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
  275.                     + students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href="javascript:;" class="check">查看</a> <a href="javascript:;" class="modify">修改</a></td>" + "</tr>");
  276.                 $("tbody").append(student);
  277.                 i++;
  278.             }
  279.             $("tbody").trigger("create");*/
  280.         } else {
  281.             alert("已经是最后一页。");
  282.         }
  283.     });
  284.     $("#lastpage").click(function () {
  285.         if (no - 10 >= 0) {
  286.             no -= 10;
  287.             page--;
  288.             $("#pgn").text(page);
  289.             update(no);
  290.             $("tbody tr:first td:first input").prop("checked", false);
  291.             /*            let i = 0;//用于增加信息条目的变量;
  292.                         $("tbody tr:first").siblings().remove();//清空界面
  293.                         while (i < 10 && no + i < stuNumber) {
  294.                             let student = $("<tr>" + "<td><input type="checkbox"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
  295.                                 + students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href="javascript:;" class="check">查看</a> <a href="javascript:;" class="modify">修改</a></td>" + "</tr>");
  296.                             $("tbody").append(student);
  297.                             i++;
  298.                         }
  299.                         $("tbody").trigger("create");*/
  300.         } else {
  301.             alert("已经是第一页。");
  302.         }
  303.     });
  304. })
复制代码
四、门生信息管理体系主界面

   (1)体系主界面如图2所示,要修业生的信息存入一个数组中,每个门生是一个对象。

图1 门生信息管理体系主界面
(2)点击“新增”按钮显示一个新的窗体,录入门生的基本信息,在生存时,必要查验数据是否合法。新增页面如图3所示。

图2 新增界面
(3)点击“修改”按钮显示一个新的窗体,修改当前行的门生信息。

图3 修改界面
(4)点击“检察”按钮显示一个新的窗体,显示当前行的门生信息。此时输入框的内容不可修改。

图4 检察
(5)其他要求
       
  • 点击“删除”按钮,显示一个扣问提示,假如选择是就删除当前行。可以多选删除,点击全选时是选择当前页全部门生。   
  • 隔行换色。   
  • 行的移入移出效果(hover)。   
  • 能够实现下一页和上一页的功能,不能翻页的时候给出提示。   
  • 展示出共有多少条数据,每页的数据条数,当前页数。
到此这篇关于JavaScript+HTML实现门生信息管理体系的文章就先容到这了,更多相干js+html实现门生信息管理体系内容请搜刮草根技能分享从前的文章或继续欣赏下面的相干文章希望各人以后多多支持草根技能分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作