JavaScript+HTML 학생 정보 관리 시스템 구현

55483 단어 JavaScriptHTML5학생.정보 관리 시스템
머리말
모든 학생 대상 의 정 보 를 배열 로 저장 하여 양 방향 업 데 이 트 를 실현 합 니 다.초기(배열 내 대상 정보'충전 인터페이스'),뒤의 인터페이스 작업 은 배열 내 대상 의 정보(수량 과 자체 데이터 도 메 인 정보)를 업데이트 할 수 있 습 니 다.
장점:JQuery 코드 처리 의 많은 디 테 일이 좋 습 니 다.
HTML 5 의 pattern+정규 표현 식 을 사용 하여 폼 검증 과 해당 하 는 힌트 를 실현 합 니 다.
단점:배경 에서 학생 대상 을 삭제 하 는 정보 코드 처리 효율 이 낮 습 니 다("가짜"삭제:이동 학생 대상 색인 위치+배열 길이 변환).
CSS 부분―인터페이스의 크기 조정 에 문제 가 있 습 니 다.(전면 에 나 설 생각 이 없다.
일부 코드 는 재 활용 의 목적 을 달성 하고 처리 되 지 않 았 습 니 다.
효과 도

코드
코드 를 쓰 는 과정 에서 개선 하기 전의 코드 를 삭제 하지 않 았 습 니 다.코드 가 좀 길 어 보 입 니 다.(코드 를 쓰 는 사고 과정 을 보류 합 니 다)
주석 을 삭제 한 코드 와 불필요 한 내용,코드 도 그리 길지 않다.
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Information Management System</title>
    <script src="../../../JQuery/JQuery.js"></script>
    <link rel="stylesheet" href="../studentInformationManagementSystemCss/studentInformationManagementSystem.css" rel="external nofollow" >
    <script src="../studentInformationManagementSystemJs/studentInformationManagementSystem.js"></script>
</head>
<body>
<div>
    <header>
        <hr/>
        <h1>        </h1>
        <hr/>
    </header>
    <main>
        <div>
            <div id="adbt">
                <button class="gre" id="add">  </button>
                <button class="red" id="delete">  </button>
            </div>
            <table>
                <tbody>
                <tr id="thead">
                    <td><input type="checkbox"></td>
                    <td>  </td>
                    <td>  </td>
                    <td>  </td>
                    <td>  </td>
                    <td>  </td>
                    <td>  </td>
                    <td>  </td>
                    <td>  </td>
                    <td>  </td>
                </tr>
                <!--<tr>
                    <td name="abc"><input type="checkbox"></td>
                    <td>1</td>
                    <td>11503080201</td>
                    <td>  </td>
                    <td>          </td>
                    <td>    </td>
                    <td>2015</td>
                    <td>2</td>
                    <td>21</td>
                    <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>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2</td>
                    <td>11503080202</td>
                    <td>  </td>
                    <td>    </td>
                    <td>   </td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <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>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>3</td>
                    <td>11503080203</td>
                    <td>  </td>
                    <td>   </td>
                    <td>  </td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <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>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>4</td>
                    <td>11503080204</td>
                    <td>  </td>
                    <td>          </td>
                    <td>    </td>
                    <td>2015</td>
                    <td>2</td>
                    <td>21</td>
                    <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>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>5</td>
                    <td>11503080205</td>
                    <td>  </td>
                    <td>    </td>
                    <td>   </td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <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>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>6</td>
                    <td>11503080206</td>
                    <td>  </td>
                    <td>   </td>
                    <td>  </td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <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>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>7</td>
                    <td>11503080207</td>
                    <td>  </td>
                    <td>          </td>
                    <td>    </td>
                    <td>2015</td>
                    <td>2</td>
                    <td>21</td>
                    <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>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>8</td>
                    <td>11503080208</td>
                    <td>  </td>
                    <td>    </td>
                    <td>   </td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <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>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>9</td>
                    <td>11503080209</td>
                    <td>  </td>
                    <td>   </td>
                    <td>  </td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <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>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>10</td>
                    <td>11503080210</td>
                    <td>  </td>
                    <td>          </td>
                    <td>    </td>
                    <td>2015</td>
                    <td>2</td>
                    <td>21</td>
                    <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>
                </tr>-->
                </tbody>
            </table>
            <div id="navigate">
                <p> <span id="pgn"></span> , <span id="en"></span>  (      10 )</p><!--Number of entries-->
                <div id="tpbt">
                    <button class="gre" id="lastpage">   </button>
                    <button class="red" id="nextpage">   </button>
                </div>
            </div>
        </div>
    </main>
</div>
<div id="sbg"></div><!--          -->
<div class="achaesi" id="asi">
<!--    <form action="" method="post">-->
    <h2>      </h2>
    <div class="ifm">
        <div><label for="assn">  </label> <input id="assn" type="text" placeholder="11503080201" required="required" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('   11      ')"></div>
        <div><label for="asn">  </label> <input id="asn" type="text" placeholder="  " required="required" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('        ')"></div>
        <div><label for="asac">  </label> <input id="asac" type="text" placeholder="        " required="required" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('         ')"></div>
        <div><label for="asm">  </label> <input id="asm" type="text" placeholder="    " required="required" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('         ')"></div>
        <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>
        <div><label for="asc">  </label> <input id="asc" type="text" placeholder="1" required="required" maxlength="1"></div>
        <div><label for="asag">  </label> <input id="asag" type="number" placeholder="20" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('        ')"></div>
    </div>
    <hr/>
    <div class="scbt">
        <button type="submit" id="submit">  </button>
        <button class="cancel">  </button>
    </div>
<!--    </form>-->
</div>
<div class="achaesi" id="chasi">
<!--    <form action="" method="post">-->
    <h2>      </h2>
    <div class="ifm">
        <div><label for="chassn">  </label> <input id="chassn" type="text" readonly required="required" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('   11      ')"></div>
        <div><label for="chasn">  </label> <input id="chasn" type="text" required="required" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('        ')"></div>
        <div><label for="chasac">  </label> <input id="chasac" type="text" required="required" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('         ')"></div>
        <div><label for="chasm">  </label> <input id="chasm" type="text" required="required" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('         ')"></div>
        <div><label for="chasg">  </label> <input id="chasg" type="text" required="required" max="2020" maxlength="4" pattern=^[0-9]{4}$" oninvalid="setCustomValidity('        ')"></div>
        <div><label for="chasc">  </label> <input id="chasc" type="text" required="required" maxlength="1"></div>
        <div><label for="chasag">  </label> <input id="chasag" type="text" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('        ')"></div>
    </div>
    <hr/>
    <div class="scbt">
        <button type="submit" id="save">  </button>
        <button class="cancel">  </button>
    </div>
<!--    </form>-->
</div>
<div class="achaesi" id="chesi">
    <h2>      </h2>
    <div class="ifm">
        <div><label for="chessn">  </label> <input type="text" readonly id="chessn"></div>
        <div><label for="chesn">  </label> <input type="text" readonly id="chesn"></div>
        <div><label for="chesac">  </label> <input type="text" readonly id="chesac"></div>
        <div><label for="chesm">  </label> <input type="text" readonly id="chesm"></div>
        <div><label for="chesg">  </label> <input type="text" readonly id="chesg"></div>
        <div><label for="chesc">  </label> <input type="text" readonly id="chesc"></div>
        <div><label for="chesag">  </label> <input type="text" readonly id="chesag"></div>
    </div>
    <hr/>
    <div class="scbt">
        <button class="cancel">  </button>
    </div>
</div>
</body>
</html>
CSS:

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: red;
}
.sbg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.4;
  z-index: 1;
}
body {
  background-color: #f0ece9;
}
header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
header h1 {
  color: #9a9897;
}
header hr {
  margin: 20px 20px 0;
  background-color: #bc9470;
  border: 2px solid #bc9470;
  width: 30%;
  height: 0;
}
main #adbt {
  margin-left: 70px;
}
main button {
  margin: 20px 5px;
  width: 85px;
  height: 40px;
  color: white;
}
main button.gre {
  background-color: #5cb85c;
}
main button.red {
  background-color: #d9534f;
}
main #navigate {
  padding: 0 70px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
main #navigate p {
  margin-top: 30px;
}
table {
  margin: 0 auto;
  width: 90%;
  text-align: center;
  border-spacing: 0;
}
table tbody tr:first-of-type {
  background-color: #dadee1 !important;
  height: 60px;
}
table tbody tr {
  height: 45px;
}
table tbody tr:nth-child(odd) {
  background-color: #eef1f8;
}
table tbody tr:nth-child(even) {
  background-color: #ffffff;
}
table tbody tr:not([id=thead]):hover {
  cursor: pointer;
  background-color: #e9e9e9;
}
.achaesi {
  display: none;
  position: absolute;
  top: 20%;
  left: 34%;
  background-color: white;
  z-index: 2;
  width: 500px;
  height: 420px;
}
.achaesi h2 {
  padding: 5px 20px;
  font-size: large;
  background-color: #555555;
  color: white;
}
.achaesi .ifm {
  width: 300px;
  margin: 10px auto;
  display: flex;
  flex-flow: column nowrap;
}
.achaesi .ifm div {
  margin: 10px;
}
.achaesi .ifm div input {
  width: 220px;
  height: 20px;
}
.achaesi .scbt {
  float: right;
  margin-top: 6px;
  margin-right: 30px;
}
.achaesi .scbt button:first-of-type {
  width: 85px;
  height: 36px;
  background-color: #5cb85c;
}
.achaesi .scbt button:last-of-type {
  width: 85px;
  height: 36px;
  background-color: white;
}
/*# sourceMappingURL=studentInformationManagementSystem.css.map */
JS:

$(function () {
    let students = [{//      
        schoolNumber: "11503080201",
        name: "  ",//my idol
        academy: "        ",
        major: "    ",
        grade: 2019,
        class: 2,
        age: 20,
    }, {
        schoolNumber: "11503080202",
        name: "  ",
        academy: "          ",
        major: "        ",
        grade: 2019,
        class: 1,
        age: 19,
    }, {
        schoolNumber: "11503080203",
        name: "  ",
        academy: "    ",
        major: "   ",
        grade: 2018,
        class: 3,
        age: 19,
    }, {
        schoolNumber: "11503080204",
        name: "  ",
        academy: "   ",
        major: "    ",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080204",
        name: "  ",
        academy: "    ",
        major: "   ",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080202",
        name: "  ",
        academy: "          ",
        major: "        ",
        grade: 2019,
        class: 1,
        age: 19,
    }, {
        schoolNumber: "11503080203",
        name: "  ",
        academy: "    ",
        major: "   ",
        grade: 2018,
        class: 3,
        age: 19,
    }, {
        schoolNumber: "11503080204",
        name: "  ",
        academy: "   ",
        major: "    ",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080204",
        name: "  ",
        academy: "    ",
        major: "   ",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080202",
        name: "  ",
        academy: "          ",
        major: "        ",
        grade: 2019,
        class: 1,
        age: 19,
    }, {
        schoolNumber: "11503080203",
        name: "  ",
        academy: "    ",
        major: "   ",
        grade: 2018,
        class: 3,
        age: 19,
    }, {
        schoolNumber: "11503080204",
        name: "  ",
        academy: "   ",
        major: "    ",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080204",
        name: "  ",
        academy: "    ",
        major: "   ",
        grade: 2017,
        class: 3,
        age: 21,
    }];
    let page = 1;//   
    let no = 0;//                     ，     0
    let stuNumber = students.length;
    for (let i = 0; i < 10; i++) {//        
        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>"
            + 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>");
        $("tbody").append(student);
    }
    $("tbody").trigger("create");//trigger()                        （      ）
    $("#pgn").text(page);
    $("#en").text(stuNumber);
    $("#add").click(function () {//           
        $("#sbg").addClass("sbg");
        $("#asi").show();
    });
 
    let objKeys = ["schoolNumber", "name", "academy", "major", "grade", "class", "age"];
    $("#submit").click(function () {//           
        let student = {};
        let isEmpty = false;
        $("#asi").find("input").each(function (index, domEle) {
            if (!domEle.value) {//            ，      
                isEmpty = true;
                /*return;*/
            }
            student[objKeys[index]] = domEle.value;
        });
        if (!isEmpty) {
            students[stuNumber] = student;
            stuNumber++;
            $("#en").text(stuNumber);
            /*$("#sbg").removeClass("sbg");
            $("#asi").hide();*/
            // $("tbody tr:first").siblings().remove();//    
            let lpren = $("tbody tr").length - 1;//          ;
            if (no + 10 > stuNumber && lpren < 10) {//    append  ，                  。
                $("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>"
                    + 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>");
                /*            let i = 0;
                            while (i < 10 && no + i < stuNumber) {
                                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>"
                                    + 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>");
                                $("tbody").append(student);
                                i++;
                            }*/
            }
        }
        $("#sbg").removeClass("sbg");
        $("#asi").hide();
 
    });
 
    $("tbody").on("click", ".check", function () {//           
        $("#sbg").addClass("sbg");
        $("#chesi").show();
        let stuIndex = $(this).parent().parent().find("td")[1].innerText - 1;
        // let i = 0;
        $("#chesi").find("input").each(function (index, domEle) {
            domEle.value = students[stuIndex][objKeys[index]];//index->i
        });
    });
 
    let modifyNumber;
    /* $(".modify").click(function () {//jQuery              
         $("#sbg").addClass("sbg");
         $("#chasi").show();
         modifyNumber = $(this).parent().parent().find("td")[1].innerText - 1;
         let i = 0;
         $("#chasi").find("input").each(function (index, domEle) {
             domEle.value = students[modifyNumber][objKeys[i++]];
         });
     });*/
    $("tbody").on("click", ".modify", function () {//           ,   jQuery                
        $("#sbg").addClass("sbg");
        $("#chasi").show();
        modifyNumber = $(this).parent().parent().find("td")[1].innerText - 1;
        let i = 0;
        $("#chasi").find("input").each(function (index, domEle) {
            domEle.value = students[modifyNumber][objKeys[i++]];
        });
    });
 
 
    $("#save").click(function () {//           
        $("#chasi").find("input").each(function (index, domEle) {
            if (domEle.value)
                students[modifyNumber][objKeys[index]] = domEle.value;
        });
        $("tbody tr").eq(modifyNumber - no + 1).remove();
        $("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>"
            + 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>");
        /*$("tbody tr:first").siblings().remove();//    
        for (let i = no; i < no+10; i++) {//        
            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>"
                + 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>");
            $("tbody").append(student);
        }
        $("tbody").trigger("create");*/
        $("#sbg").removeClass("sbg");
        $("#chasi").hide();
    });
 
 
    $(".cancel").click(function () {//             
        $("#sbg").removeClass("sbg");
        $(".achaesi").hide();
    });
 
    $("tbody tr td:first").click(function () {//       JQuery     
        $("tbody tr td input").prop("checked", $("tbody tr:first td:first input").prop("checked"));
    });
 
    $("tbody").on("click", $("tbody tr:nth-of-type(1)").siblings().find("input"), function () {
        let isSelectAll = true;
        $("tbody tr:nth-of-type(1)").siblings().find("input").each(function (index, domEle) {
            if ($(domEle).prop("checked") == false)
                isSelectAll = false;
        });
        $("tbody tr:first td:first input").prop("checked", isSelectAll);
    })
 
    let update = (no) => {
        let i = 0;//           ;
        $("tbody tr:first").siblings().remove();//    
        while (i < 10 && no + i < stuNumber) {
            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>"
                + 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>");
            $("tbody").append(student);
            i++;
        }
        $("tbody").trigger("create");
    }
 
    $("#delete").click(function () {
        if (confirm("          ？")) {
            let delNumber = 0;//        ;
            let delIndexs = []; //         ;        “  ”      
            // let i = 0;//           ;
            $("tbody tr td input").each(function (index, domEle) {
                if (index != 0 && $(domEle).prop("checked")) {//index != 0,        
                    delIndexs[delIndexs.length] = $(domEle).parent().next().text() - 1;
                    $(domEle).parent().parent().remove();
                    delNumber++;
                }
            });
 
            for (let j = delIndexs.length - 1; j >= 0; j--) {
                for (let k = delIndexs[j]; k < stuNumber - 1; k++) {//     ，          ; JS    ，            !
                    students[k] = students[k + 1];
                }
            }
 
            stuNumber -= delNumber;//        (    )        “  ”
            $("#en").text(stuNumber);//     
            if (stuNumber == no) {
                no -= 10;
                page--;
                $("#pgn").text(page);
            }
            update(no);
            /*            $("tbody tr:first").siblings().remove();//    
                        while (i < 10 && no + i < stuNumber) {
                            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>"
                                + 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>");
                            $("tbody").append(student);
                            i++;
                        }
                        $("tbody").trigger("create");*/
            $("tbody tr td:first input").prop("checked", false);
        }
    });
 
    $("#nextpage").click(function () {
        if (no + 10 < stuNumber) {
            no += 10;
            page++;
            $("#pgn").text(page);
            update(no);
            $("tbody tr:first td:first input").prop("checked", false);
            /*let i = 0;//           ;
            $("tbody tr:first").siblings().remove();//    
            while (i < 10 && no + i < stuNumber) {
                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>"
                    + 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>");
                $("tbody").append(student);
                i++;
            }
            $("tbody").trigger("create");*/
        } else {
            alert("       。");
        }
    });
 
    $("#lastpage").click(function () {
        if (no - 10 >= 0) {
            no -= 10;
            page--;
            $("#pgn").text(page);
            update(no);
            $("tbody tr:first td:first input").prop("checked", false);
            /*            let i = 0;//           ;
                        $("tbody tr:first").siblings().remove();//    
                        while (i < 10 && no + i < stuNumber) {
                            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>"
                                + 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>");
                            $("tbody").append(student);
                            i++;
                        }
                        $("tbody").trigger("create");*/
        } else {
            alert("      。");
        }
    });
 
})
4.학생 정보 관리 시스템 의 메 인 인터페이스
   （1)시스템 메 인 화면 은 그림 2 에서 보 듯 이 학생 들 의 정 보 를 하나의 배열 에 저장 하도록 요구 하고 모든 학생 은 하나의 대상 이다.

그림 1 학생 정보 관리 시스템 메 인 인터페이스
(2)'추가'단 추 를 누 르 면 새로운 창 을 표시 하고 학생 들 의 기본 정 보 를 입력 하 며 저장 할 때 데이터 가 합 법 적 인지 확인 해 야 합 니 다.새로 추 가 된 페이지 는 그림 3 과 같다.

그림 2 신규 인터페이스
(3)'수정'단 추 를 누 르 면 새 창 을 표시 하고 현재 줄 의 학생 정 보 를 수정 합 니 다.

그림 3 수정 인터페이스
(4)'보기'단 추 를 누 르 면 새 창 을 표시 하고 현재 줄 의 학생 정 보 를 표시 합 니 다.입력 상자 의 내용 을 수정 할 수 없습니다.

그림 4 보기
(5)기타 요구 사항
  • '삭제'단 추 를 누 르 면 질문 알림 을 표시 하고 선택 하면 현재 줄 을 삭제 합 니 다.여러 번 선택 하여 삭제 할 수 있 습 니 다.전체 선택 을 누 르 면 현재 페이지 의 모든 학생 을 선택 합 니 다
    • 줄 을 사이 에 두 고 색 을 바꾸다
  • 줄 이동 효과(hover).
    • 4.567917.다음 페이지 와 이전 페이지 의 기능 을 실현 할 수 있 고 페이지 를 넘 길 수 없 을 때 힌트 를 줍 니 다4.567917.모두 몇 개의 데이터 가 있 는 지,각 페이지 의 데이터 항목 수,현재 페이지 수 를 보 여 줍 니 다자 바스 크 립 트+HTML 이 학생 정보 관리 시스템 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 js+html 가 학생 정보 관리 시스템 을 실현 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
    동적 추가 js 이벤트 구현 코드
    JavaScript RegExp 방법 으로 주소 표시 줄 인자 가 져 오기(대상 지향)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage