JavaScript+HTML zur Implementierung eines Studenteninformationsmanagementsystems

JavaScript+HTML zur Implementierung eines Studenteninformationsmanagementsystems

1. Einleitung

Ein Array wird verwendet, um die Informationen aller Studentenobjekte zu speichern, und bidirektionale Aktualisierungen werden implementiert. Zunächst (die Objektinformationen im Array „füllen die Schnittstelle“) und nachfolgende Schnittstellenoperationen können die Informationen der Objekte im Array aktualisieren (die Menge und die Datendomäneninformationen selbst).

Vorteile: Viele Details werden durch den JQuery-Code besser verarbeitet.

Verwenden Sie das Muster und den regulären Ausdruck von HTML5, um die Formularvalidierung und die entsprechenden Eingabeaufforderungen zu implementieren.

Nachteile: Die Effizienz der Hintergrundcodeverarbeitung beim Löschen von Studentenobjekten ist gering („gefälschtes“ Löschen: Verschieben der Position des Studentenobjektindex + Ändern der Array-Länge).

CSS-Teil – es gibt ein Problem mit der Skalierung der Schnittstelle. (Plane nichts am Frontend/bin im Moment zu faul, es zu ändern). .

Einige Codes können zum Erreichen des Zwecks der Wiederverwendung besser verarbeitet werden und werden daher nicht verarbeitet.

2. Rendern

3. Code

Der Code vor der Verbesserung wurde während des Schreibvorgangs nicht gelöscht, daher sieht der Code etwas lang aus (der Denkprozess beim Schreiben des Codes bleibt erhalten).

Löschen Sie den kommentierten Code und einige unnötige Inhalte. Der Code ist nicht zu lang.

HTML:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Studenteninformationsmanagementsystem</title>
    <script src="../../../JQuery/JQuery.js"></script>
    <link rel="stylesheet" href="../studentInformationManagementSystemCss/studentInformationManagementSystem.css" rel="externes nofollow" >
    <script src="../studentInformationManagementSystemJs/studentInformationManagementSystem.js"></script>
</Kopf>
<Text>
<div>
    <Kopfzeile>
        <hr/>
        <h1>Studenteninformationsmanagementsystem</h1>
        <hr/>
    </header>
    <Haupt>
        <div>
            <div id="adbt">
                <button class="gre" id="add">Hinzufügen</button>
                <button class="red" id="delete">Löschen</button>
            </div>
            <Tabelle>
                <tbody>
                <tr id="thead">
                    <td><Eingabetyp="Kontrollkästchen"></td>
                    <td>Seriennummer</td>
                    <td>Matrikelnummer</td>
                    <td>Name</td>
                    <td>Hochschule</td>
                    <td>Professionell</td>
                    <td>Note</td>
                    <td>Klasse</td>
                    <td>Alter</td>
                    <td>Betrieb</td>
                </tr>
                <!--<tr>
                    <td name="abc"><input type="checkbox"></td>
                    <td>1</td>
                    <td>11503080201</td>
                    <td>Zhang San</td>
                    <td>Fakultät für Informatik und Ingenieurwesen</td>
                    <td>Softwareentwicklung</td>
                    <td>2015</td>
                    <td>2</td>
                    <td>21</td>
                    <td> <a href = "#" rel = "externer nofollow" rel = "externer nofollober" rel = "externe nofolefol = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofoxa" rel = "externe nofoxodecloxe" -Reloxe "查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看" Ternal nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofolefol ähe "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "class" class = "modify"> 修改 </a> </td>
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen"></td>
                    <td>2</td>
                    <td>11503080202</td>
                    <td>Li Si</td>
                    <td>Schule für Rechnungswesen</td>
                    <td>Buchhaltung</td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <td> <a href = "#" rel = "externer nofollow" rel = "externer nofollober" rel = "externe nofolefol = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofoxa" rel = "externe nofoxodecloxe" -Reloxe "查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看" Ternal nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofolefol ähe "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "class" class = "modify"> 修改 </a> </td>
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen"></td>
                    <td>3</td>
                    <td>11503080203</td>
                    <td>Wang Er</td>
                    <td>Fakultät für Naturwissenschaften</td>
                    <td>Mathematik</td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <td> <a href = "#" rel = "externer nofollow" rel = "externer nofollober" rel = "externe nofolefol = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofoxa" rel = "externe nofoxodecloxe" -Reloxe "查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看" Ternal nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofolefol ähe "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "class" class = "modify"> 修改 </a> </td>
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen"></td>
                    <td>4</td>
                    <td>11503080204</td>
                    <td>Zhang San</td>
                    <td>Fakultät für Informatik und Ingenieurwesen</td>
                    <td>Softwareentwicklung</td>
                    <td>2015</td>
                    <td>2</td>
                    <td>21</td>
                    <td> <a href = "#" rel = "externer nofollow" rel = "externer nofollober" rel = "externe nofolefol = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofoxa" rel = "externe nofoxodecloxe" -Reloxe "查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看" Ternal nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofolefol ähe "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "class" class = "modify"> 修改 </a> </td>
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen"></td>
                    <td>5</td>
                    <td>11503080205</td>
                    <td>Li Si</td>
                    <td>Schule für Rechnungswesen</td>
                    <td>Buchhaltung</td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <td> <a href = "#" rel = "externer nofollow" rel = "externer nofollober" rel = "externe nofolefol = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofoxa" rel = "externe nofoxodecloxe" -Reloxe "查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看" Ternal nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofolefol ähe "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "class" class = "modify"> 修改 </a> </td>
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen"></td>
                    <td>6</td>
                    <td>11503080206</td>
                    <td>Wang Er</td>
                    <td>Fakultät für Naturwissenschaften</td>
                    <td>Mathematik</td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <td> <a href = "#" rel = "externer nofollow" rel = "externer nofollober" rel = "externe nofolefol = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofoxa" rel = "externe nofoxodecloxe" -Reloxe "查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看" Ternal nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofolefol ähe "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "class" class = "modify"> 修改 </a> </td>
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen"></td>
                    <td>7</td>
                    <td>11503080207</td>
                    <td>Zhang San</td>
                    <td>Fakultät für Informatik und Ingenieurwesen</td>
                    <td>Softwareentwicklung</td>
                    <td>2015</td>
                    <td>2</td>
                    <td>21</td>
                    <td> <a href = "#" rel = "externer nofollow" rel = "externer nofollober" rel = "externe nofolefol = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofoxa" rel = "externe nofoxodecloxe" -Reloxe "查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看" Ternal nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofolefol ähe "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "class" class = "modify"> 修改 </a> </td>
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen"></td>
                    <td>8</td>
                    <td>11503080208</td>
                    <td>Li Si</td>
                    <td>Schule für Rechnungswesen</td>
                    <td>Buchhaltung</td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <td> <a href = "#" rel = "externer nofollow" rel = "externer nofollober" rel = "externe nofolefol = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofoxa" rel = "externe nofoxodecloxe" -Reloxe "查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看" Ternal nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofolefol ähe "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "class" class = "modify"> 修改 </a> </td>
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen"></td>
                    <td>9</td>
                    <td>11503080209</td>
                    <td>Wang Er</td>
                    <td>Fakultät für Naturwissenschaften</td>
                    <td>Mathematik</td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <td> <a href = "#" rel = "externer nofollow" rel = "externer nofollober" rel = "externe nofolefol = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofoxa" rel = "externe nofoxodecloxe" -Reloxe "查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看" Ternal nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofolefol ähe "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "class" class = "modify"> 修改 </a> </td>
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen"></td>
                    <td>10</td>
                    <td>11503080210</td>
                    <td>Zhang San</td>
                    <td>Fakultät für Informatik und Ingenieurwesen</td>
                    <td>Softwareentwicklung</td>
                    <td>2015</td>
                    <td>2</td>
                    <td>21</td>
                    <td> <a href = "#" rel = "externer nofollow" rel = "externer nofollober" rel = "externe nofolefol = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofoxa" rel = "externe nofoxodecloxe" -Reloxe "查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看 查看" Ternal nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofolefol ähe "rel =" externe nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "class" class = "modify"> 修改 </a> </td>
                </tr>-->
                </tbody>
            </Tabelle>
            <div id="navigieren">
                <p>Seite <span id="pgn"></span>, Gesamtzahl <span id="en"></span> Einträge (bis zu 10 Einträge pro Seite)</p><!--Anzahl der Einträge-->
                <div id="tpbt">
                    <button class="gre" id="lastpage">Vorherige Seite</button>
                    <button class="red" id="nextpage">Nächste Seite</button>
                </div>
            </div>
        </div>
    </main>
</div>
<div id="sbg"></div><!--Schattenhintergrund beim Hinzufügen, Löschen, Ändern und Prüfen-->
<div Klasse="achaesi" id="asi">
<!-- <form action="" method="post">-->
    <h2>Studenteninformationen hinzufügen</h2>
    <div Klasse="ifm">
        <div><label for="assn">Matrikelnummer</label> <input id="assn" type="text" placeholder="11503080201" required="erforderlich" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('Bitte geben Sie eine 11-stellige Zahlenkombination ein')"></div>
        <div><label for="asn">Name</label> <input id="asn" type="text" placeholder="Lei Jun" required="erforderlich" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('Bitte geben Sie einen korrekten Namen ein')"></div>
        <div><label for="asac">Hochschule</label> <input id="asac" type="text" placeholder="Liangjiang College of Artificial Intelligence" required="erforderlich" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('Bitte geben Sie den korrekten Namen der Hochschule ein')"></div>
        <div><label for="asm">Professionell</label> <input id="asm" type="text" placeholder="Software Engineering" required="erforderlich" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('Bitte geben Sie den korrekten Berufsnamen ein')"></div>
        <div><label for="asg">Note</label> <input id="asg" type="text" placeholder="2015" required="erforderlich" max="2020" maxlength="4" pattern="^[0-9]{4}$" oninvalid="setCustomValidity('Bitte geben Sie die richtige Note ein')"></div>
        <div><label for="asc">Klasse</label> <input id="asc" type="text" placeholder="1" required="erforderlich" maxlength="1"></div>
        <div><label for="asag">Alter</label> <input id="asag" type="number" placeholder="20" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('Bitte geben Sie das richtige Alter ein')"></div>
    </div>
    <hr/>
    <div Klasse="scbt">
        <button type="submit" id="submit">Senden</button>
        <button class="cancel">Abbrechen</button>
    </div>
<!-- </form>-->
</div>
<div Klasse="achaesi" id="chasi">
<!-- <form action="" method="post">-->
    <h2>Studenteninformationen ändern</h2>
    <div Klasse="ifm">
        <div><label for="chassn">Matrikelnummer</label> <input id="chassn" type="text" readonly required="erforderlich" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('Bitte geben Sie eine 11-stellige Zahlenkombination ein')"></div>
        <div><label for="chasn">Name</label> <input id="chasn" type="text" required="erforderlich" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('Bitte geben Sie einen korrekten Namen ein')"></div>
        <div><label for="chasac">Hochschule</label> <input id="chasac" type="text" required="erforderlich" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('Bitte geben Sie den korrekten Namen der Hochschule ein')"></div>
        <div><label for="chasm">Berufstätig</label> <input id="chasm" type="text" required="erforderlich" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('Bitte geben Sie einen korrekten Berufsnamen ein')"></div>
        <div><label for="chasg">Note</label> <input id="chasg" type="text" required="erforderlich" max="2020" maxlength="4" pattern=^[0-9]{4}$" oninvalid="setCustomValidity('Bitte geben Sie die richtige Note ein')"></div>
        <div><label for="chasc">Klasse</label> <input id="chasc" type="text" required="erforderlich" maxlength="1"></div>
        <div><label for="chasag">Alter</label> <input id="chasag" type="text" required="erforderlich" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('Bitte geben Sie das richtige Alter ein')"></div>
    </div>
    <hr/>
    <div Klasse="scbt">
        <button type="submit" id="save">Speichern</button>
        <button class="cancel">Abbrechen</button>
    </div>
<!-- </form>-->
</div>
<div Klasse="achaesi" id="chesi">
    <h2>Studenteninformationen anzeigen</h2>
    <div Klasse="ifm">
        <div><label for="chessn">Matrikelnummer</label> <input type="text" readonly id="chessn"></div>
        <div><label für="chesn">Name</label> <input type="text" schreibgeschützte ID="chesn"></div>
        <div><label für="chesac">Hochschule</label> <input type="text" readonly id="chesac"></div>
        <div><label für="chesm">Professionell</label> <input type="text" readonly id="chesm"></div>
        <div><label for="chesg">Note</label> <input type="text" readonly id="chesg"></div>
        <div><label for="chesc">Klasse</label> <input type="text" readonly id="chesc"></div>
        <div><label for="chesag">Alter</label> <input type="text" readonly id="chesag"></div>
    </div>
    <hr/>
    <div Klasse="scbt">
        <button class="cancel">Abbrechen</button>
    </div>
</div>
</body>
</html>

CSS:

* {
  Rand: 0;
  Polsterung: 0;
}
A {
  Textdekoration: keine;
  Farbe: rot;
}
.sbg {
  Position: absolut;
  oben: 0;
  Breite: 100 %;
  Höhe: 100%;
  Hintergrundfarbe: schwarz;
  Deckkraft: 0,4;
  Z-Index: 1;
}
Körper {
  Hintergrundfarbe: #f0ece9;
}
Kopfzeile {
  Anzeige: Flex;
  Flex-Flow: Zeile Nowrap;
  Inhalt ausrichten: Abstand dazwischen;
}
Überschrift h1 {
  Farbe: #9a9897;
}
Header Std. {
  Rand: 20px 20px 0;
  Hintergrundfarbe: #bc9470;
  Rand: 2px durchgezogen #bc9470;
  Breite: 30%;
  Höhe: 0;
}
Haupt #adbt {
  Rand links: 70px;
}
Haupttaste {
  Rand: 20px 5px;
  Breite: 85px;
  Höhe: 40px;
  Farbe: weiß;
}
Haupttaste.gre {
  Hintergrundfarbe: #5cb85c;
}
Hauptknopf.rot {
  Hintergrundfarbe: #d9534f;
}
Haupt #navigieren {
  Polsterung: 0 70px;
  Anzeige: Flex;
  Flex-Flow: Zeile Nowrap;
  Inhalt ausrichten: Abstand dazwischen;
}
Haupt #navigieren p {
  Rand oben: 30px;
}
Tisch {
  Rand: 0 automatisch;
  Breite: 90%;
  Textausrichtung: zentriert;
  Rahmenabstand: 0;
}
Tabelle tbody tr:erster-vom-Typ {
  Hintergrundfarbe: #dadee1 !wichtig;
  Höhe: 60px;
}
Tabelle tbody tr {
  Höhe: 45px;
}
Tabelle tbody tr:n-tes-Kind(ungerade) {
  Hintergrundfarbe: #eef1f8;
}
Tabelle tbody tr:nth-child(gerade) {
  Hintergrundfarbe: #ffffff;
}
Tabelle tbody tr:nicht([id=thead]):hover {
  Cursor: Zeiger;
  Hintergrundfarbe: #e9e9e9;
}
.achaesi {
  Anzeige: keine;
  Position: absolut;
  oben: 20 %;
  links: 34%;
  Hintergrundfarbe: weiß;
  Z-Index: 2;
  Breite: 500px;
  Höhe: 420px;
}
.achaesi h2 {
  Polsterung: 5px 20px;
  Schriftgröße: groß;
  Hintergrundfarbe: #555555;
  Farbe: weiß;
}
.achaesi .ifm {
  Breite: 300px;
  Rand: 10px automatisch;
  Anzeige: Flex;
  Flex-Flow: Spalte Nowrap;
}
.achaesi .ifm div {
  Rand: 10px;
}
.achaesi .ifm div Eingabe {
  Breite: 220px;
  Höhe: 20px;
}
.achaesi .scbt {
  schweben: rechts;
  Rand oben: 6px;
  Rand rechts: 30px;
}
.achaesi .scbt-Schaltfläche:Erster-des-Typs {
  Breite: 85px;
  Höhe: 36px;
  Hintergrundfarbe: #5cb85c;
}
.achaesi .scbt button:letzter-vom-Typ {
  Breite: 85px;
  Höhe: 36px;
  Hintergrundfarbe: weiß;
}
/*# sourceMappingURL=studentInformationManagementSystem.css.map */

JS:

$(Funktion () {
    let students = [{//Anfangsschnittstellendaten Schulnummer: "11503080201",
        Name: „Lei Jun“,//mein Idol
        Akademie: „Liangjiang Artificial Intelligence Academy“,
        Hauptfach: „Software Engineering“,
        Note: 2019,
        Klasse: 2,
        Alter: 20,
    }, {
        Schulnummer: "11503080202",
        Name: "Zhang San",
        Akademie: "Schule für Computertechnik und Technologie",
        Hauptfach: „Informatik und Technik“,
        Note: 2019,
        Klasse: 1,
        Alter: 19,
    }, {
        Schulnummer: "11503080203",
        Name: "Li Si",
        Akademie: "Buchhaltungsakademie",
        Hauptfach: „Rechnungswesen“,
        Note: 2018,
        Klasse: 3,
        Alter: 19,
    }, {
        Schulnummer: "11503080204",
        Name: "Wang Wu",
        Akademie: "Fakultät für Naturwissenschaften",
        Hauptfach: „Angewandte Physik“,
        Note: 2017,
        Klasse: 3,
        Alter: 21,
    }, {
        Schulnummer: "11503080204",
        Name: "Zhao Liu",
        Akademie: "Buchhaltungsakademie",
        Hauptfach: „Finanzen“,
        Note: 2017,
        Klasse: 3,
        Alter: 21,
    }, {
        Schulnummer: "11503080202",
        Name: "Zhang San",
        Akademie: "Schule für Computertechnik und Technologie",
        Hauptfach: „Informatik und Technik“,
        Note: 2019,
        Klasse: 1,
        Alter: 19,
    }, {
        Schulnummer: "11503080203",
        Name: "Li Si",
        Akademie: "Buchhaltungsakademie",
        Hauptfach: „Rechnungswesen“,
        Note: 2018,
        Klasse: 3,
        Alter: 19,
    }, {
        Schulnummer: "11503080204",
        Name: "Wang Wu",
        Akademie: "Fakultät für Naturwissenschaften",
        Hauptfach: „Angewandte Physik“,
        Note: 2017,
        Klasse: 3,
        Alter: 21,
    }, {
        Schulnummer: "11503080204",
        Name: "Zhao Liu",
        Akademie: "Buchhaltungsakademie",
        Hauptfach: „Finanzen“,
        Note: 2017,
        Klasse: 3,
        Alter: 21,
    }, {
        Schulnummer: "11503080202",
        Name: "Zhang San",
        Akademie: "Schule für Computertechnik und Technologie",
        Hauptfach: „Informatik und Technik“,
        Note: 2019,
        Klasse: 1,
        Alter: 19,
    }, {
        Schulnummer: "11503080203",
        Name: "Li Si",
        Akademie: "Buchhaltungsakademie",
        Hauptfach: „Rechnungswesen“,
        Note: 2018,
        Klasse: 3,
        Alter: 19,
    }, {
        Schulnummer: "11503080204",
        Name: "Wang Wu",
        Akademie: "Fakultät für Naturwissenschaften",
        Hauptfach: „Angewandte Physik“,
        Note: 2017,
        Klasse: 3,
        Alter: 21,
    }, {
        Schulnummer: "11503080204",
        Name: "Zhao Liu",
        Akademie: "Buchhaltungsakademie",
        Hauptfach: „Finanzen“,
        Note: 2017,
        Klasse: 3,
        Alter: 21,
    }];
    let page = 1; // Seitenzahl let no = 0; // das erste Objekt der angezeigten Seitenzahl ist die Objektnummer im Array, der anfängliche Index ist 0
    sei stuNumber = Studentenlänge;
    für (let i = 0; i < 10; i++) {//Anfängliche Anzeige der Seiteninformationen 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\">Anzeigen</a> <a href=\"javascript:;\" class=\"modify\">Ändern</a></td>" + "</label></tr>");
        $("tbody").anhängen(Student);
    }
    $("tbody").trigger("create"); //Die Methode trigger() löst das angegebene Ereignis beim ausgewählten Element und das Standardverhalten des Ereignisses aus (z. B. das Absenden eines Formulars).
    $("#pgn").text(Seite);
    $("#en").text(stuNumber);
    $("#add").click(function () {//Aktion, die durch Klicken auf die Schaltfläche „Hinzufügen“ ausgelöst wird$("#sbg").addClass("sbg");
        $("#asi").anzeigen();
    });
 
    let objKeys = ["Schulnummer", "Name", "Akademie", "Hauptfach", "Klasse", "Alter"];
    $("#submit").click(function () {//Aktion, die durch Klicken auf die Schaltfläche „Senden“ ausgelöst wird let student = {};
        lass isEmpty = false;
        $("#asi").find("Eingabe").jeweils(Funktion (Index, DomEle) {
            if (!domEle.value) {//Wenn der Wert im Formular beim Hinzufügen leer ist, wird er nicht hinzugefügt. isEmpty = true;
                /*zurückkehren;*/
            }
            Student[Objektschlüssel[Index]] = domEle.Wert;
        });
        wenn (!istEmpty) {
            Studenten[Studentennummer] = Student;
            stuNummer++;
            $("#en").text(stuNumber);
            /*$("#sbg").removeClass("sbg");
            $("#asi").hide();*/
            // $("tbody tr:first").siblings().remove(); //Schnittstelle löschen let lpren = $("tbody tr").length - 1; //Anzahl der verbleibenden Einträge auf der letzten Seite;
            if (no + 10 > stuNumber && lpren < 10) { //Füge eine Anfügefunktion hinzu. Wenn die letzte Seite angezeigt wird, muss die Schnittstelle aktualisiert werden.
                $("tbody tr:last").after("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + lpren + 1) + "</td>" + "<td>" + student.Schulnummer + "</td>" + "<td>" + student.Name + "</td>" + "<td>" + student.Akademie + "</td>" + "<td>" + student.Hauptfach + "</td>" + "<td>"
                    + student.grade + "</td>" + "<td>" + student.class + "</td>" + "<td>" + student.age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">Anzeigen</a> <a href=\"javascript:;\" class=\"modify\">Ändern</a></td>" + "</tr>");
                /* sei i = 0;
                            während (i < 10 und nein + 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\">Anzeigen</a> <a href=\"javascript:;\" class=\"modify\">Ändern</a></td>" + "</tr>");
                                $("tbody").anhängen(Student);
                                ich++;
                            }*/
            }
        }
        $("#sbg").removeClass("sbg");
        $("#asi").ausblenden();
 
    });
 
    $("tbody").on("click", ".check", function () {//Klicken Sie auf die Schaltfläche „Anzeigen“, um die Aktion auszulösen$("#sbg").addClass("sbg");
        $("#chesi").show();
        lass stuIndex = $(this).parent().parent().find("td")[1].innerText - 1;
        // sei i = 0;
        $("#chesi").find("Eingabe").each(Funktion (Index, DomEle) {
            domEle.value = Studenten[stuIndex][objKeys[index]];//index->i
        });
    });
 
    lass Nummer ändern;
    /* $(".modify").click(function () {//Das Klickereignis des neu hinzugefügten Elements, das in jQuery erscheint, ist ungültig $("#sbg").addClass("sbg");
         $("#chasi").anzeigen();
         Nummer ändern = $(this).parent().parent().find("td")[1].innerText - 1;
         sei i = 0;
         $("#chasi").find("Eingabe").each(Funktion (Index, DomEle) {
             domEle.value = Studenten[modifizierteNummer][objKeys[i++]];
         });
     });*/
    $("tbody").on("click", ".modify", function () {//Klicken Sie auf die Schaltfläche „Ändern“, um die Aktion auszulösen. Dadurch wird das Problem ungültiger Klickereignisse neu hinzugefügter Elemente in jQuery gelöst.$("#sbg").addClass("sbg");
        $("#chasi").anzeigen();
        Nummer ändern = $(this).parent().parent().find("td")[1].innerText - 1;
        sei i = 0;
        $("#chasi").find("Eingabe").each(Funktion (Index, DomEle) {
            domEle.value = Studenten[modifizierteNummer][objKeys[i++]];
        });
    });
 
 
    $("#save").click(function () {//Aktion, die durch Klicken auf die Schaltfläche „Speichern“ ausgelöst wird$("#chasi").find("input").each(function (index, domEle) {
            wenn (domEle.Wert)
                Studenten[modifizierteNummer][Objektschlüssel[Index]] = domEle.value;
        });
        $("tbody tr").eq(modifizierte Nummer - nein + 1).entfernen();
        $("tbody tr").eq(modifyNumber - nein).after("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (modifyNumber - nein + 1) + "</td>" + "<td>" + Studenten[modifyNumber].Schulnummer + "</td>" + "<td>" + Studenten[modifyNumber].Name + "</td>" + "<td>" + Studenten[modifyNumber].Akademie + "</td>" + "<td>" + Studenten[modifyNumber].Hauptfach + "</td>" + "<td>"
            + students[modifyNumber].Klasse + "</td>" + "<td>" + students[modifyNumber].Klasse + "</td>" + "<td>" + students[modifyNumber].Alter + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">Anzeigen</a> <a href=\"javascript:;\" class=\"modify\">Ändern</a></td>" + "</tr>");
        /*$("tbody tr:first").siblings().remove();//Schnittstelle löschenfor (let i = no; i < no+10; i++) {//Anfängliche Anzeige der Seiteninformationenlet 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\">Anzeigen</a> <a href=\"javascript:;\" class=\"modify\">Ändern</a></td>" + "</tr>");
            $("tbody").anhängen(Student);
        }
        $("tbody").trigger("erstellen");*/
        $("#sbg").removeClass("sbg");
        $("#chasi").ausblenden();
    });
 
 
    $(".cancel").click(function () {//Durch Klicken auf mehrere Abbrechen-Schaltflächen ausgelöste Aktionen$("#sbg").removeClass("sbg");
        $(".achaesi").hide();
    });
 
    $("tbody tr td:first").click(function () {//Die Operation „Alles auswählen“ verwendet die implizite Iteration von JQuery $("tbody tr td input").prop("checked", $("tbody tr:first td:first input").prop("checked"));
    });
 
    $("tbody").bei("Klick", $("tbody tr:nth-of-type(1)").geschwister().find("Eingabe"), Funktion () {
        sei isSelectAll = true;
        $("tbody tr:n-ter-vom-Typ(1)").geschwister().find("Eingabe").jeder(Funktion (Index, DomEle) {
            wenn ($(domEle).prop("checked") == false)
                istSelectAll = falsch;
        });
        $("tbody tr:erste td:erste Eingabe").prop("aktiviert", isSelectAll);
    })
 
    let update = (nein) => {
        let i = 0; //Variable zum Hinzufügen von Informationseinträgen;
        $("tbody tr:first").siblings().remove(); //Schnittstelle löschen 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\">Anzeigen</a> <a href=\"javascript:;\" class=\"modify\">Ändern</a></td>" + "</tr>");
            $("tbody").anhängen(Student);
            ich++;
        }
        $("tbody").trigger("erstellen");
    }
 
    $("#löschen").klick(Funktion () {
        if (confirm("Möchten Sie diese Informationen wirklich löschen?")) {
            let delNumber = 0; //Die Anzahl der gelöschten Informationseinträge;
            let delIndexs = []; //Löscht den Index des Informationseintrags; wird für die Nachbearbeitung verwendet, um ein „Durchfallen“ und ungültige Bewegungen zu vermeiden // let i = 0; //Variable zum Hinzufügen von Informationseinträgen;
            $("tbody tr td input").jeder(Funktion (Index, DomEle) {
                if (index != 0 && $(domEle).prop("checked")) {//index != 0, um das Löschen der Titelzeile zu verhindern delIndexs[delIndexes.length] = $(domEle).parent().next().text() - 1;
                    $(domEle).parent().parent().entfernen();
                    delNumber++;
                }
            });
 
            für (let j = delIndexs.length - 1; j >= 0; j--) {
                for (let k = delIndexs[j]; k < stuNumber - 1; k++) { // Ineffizienter Code, erfordert viele bewegliche Objektindizes; kenne mich mit JS nicht so gut aus und habe noch nicht an eine effiziente Lösung gedacht!
                    Studenten[k] = Studenten[k + 1];
                }
            }
 
            stuNumber -= delNumber; //Zeiger auf das Ende des Arrays, in dem die zugrunde liegenden Daten (Studentenobjekt) „verschoben“ werden
            $("#en").text(stuNumber); //Aktualisiere die Anzahl der Einträge if (stuNumber == no) {
                nein -= 10;
                Seite--;
                $("#pgn").text(Seite);
            }
            aktualisieren (nein);
            /* $("tbody tr:first").siblings().remove();//Schnittstelle löschen 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\">Anzeigen</a> <a href=\"javascript:;\" class=\"modify\">Ändern</a></td>" + "</tr>");
                            $("tbody").anhängen(Student);
                            ich++;
                        }
                        $("tbody").trigger("erstellen");*/
            $("tbody tr td:erste Eingabe").prop("überprüft", false);
        }
    });
 
    $("#nächsteSeite").Klick(Funktion () {
        wenn (nein + 10 < stuNumber) {
            nein += 10;
            Seite++;
            $("#pgn").text(Seite);
            aktualisieren (nein);
            $("tbody tr:first td:first input").prop("überprüft", false);
            /*let i = 0; //Variable zum Hinzufügen von Informationseinträgen;
            $("tbody tr:first").siblings().remove(); //Schnittstelle löschen 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\">Anzeigen</a> <a href=\"javascript:;\" class=\"modify\">Ändern</a></td>" + "</tr>");
                $("tbody").anhängen(Student);
                ich++;
            }
            $("tbody").trigger("erstellen");*/
        } anders {
            alert("Dies ist die letzte Seite.");
        }
    });
 
    $("#letzteSeite").click(function () {
        wenn (nein - 10 >= 0) {
            nein -= 10;
            Seite--;
            $("#pgn").text(Seite);
            aktualisieren (nein);
            $("tbody tr:first td:first input").prop("überprüft", false);
            /* let i = 0; //Variable zum Hinzufügen von Informationseinträgen;
                        $("tbody tr:first").siblings().remove(); //Schnittstelle löschen 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>"
                                + Schüler [no + i] .grade + "</td>" + "<td>" + Schüler [no + i] .CLASS + "</td>" + "<td>" + Schüler [no + i] .age + "</td>" + "<td> <a href = \" javascript:; = \ "modifizieren \"> modifizieren </a> </td> " +" </tr> ");
                            $ ("tbody"). Append (Student);
                            ich++;
                        }
                        $ ("tbody"). Trigger ("erstellen");*//
        } anders {
            alarm ("Dies ist bereits die erste Seite.");
        }
    });
 
})

4. Hauptschnittstelle des Student Information Management Systems

(1) Die Hauptschnittstelle des Systems ist in Abbildung 2 dargestellt. Es ist erforderlich, dass die Informationen der Schüler in einem Array gespeichert werden, und jeder Schüler ist ein Objekt.

Abbildung 1 Hauptschnittstelle des Student Information Management Systems

(2) Klicken Sie auf die Schaltfläche "Hinzufügen", um ein neues Fenster anzuzeigen und die Grundinformationen des Schülers einzugeben. Die neu hinzugefügte Seite ist in Abbildung 3 dargestellt.

Abbildung 2 neue Schnittstelle

(3) Klicken Sie auf die Schaltfläche "Ändern", um ein neues Fenster anzuzeigen, um die Schülerinformationen der aktuellen Zeile zu ändern.

Abbildung 3 Modifikationsschnittstelle

(4) Klicken Sie auf die Schaltfläche "anzeigen", um ein neues Fenster anzuzeigen, das die Schülerinformationen der aktuellen Zeile zeigt. Der Inhalt des Eingangsfelds kann zu diesem Zeitpunkt nicht geändert werden.

Abbildung 4 Ansicht

(5) andere Anforderungen

  • Klicken Sie auf die Schaltfläche "Löschen", um eine Abfrageingabeaufforderung anzuzeigen. Sie können mehrere Schüler auswählen, um zu löschen.
  • Ändern Sie die Farben bei jeder anderen Linie.
  • Der Reihenbewegungseffekt (Schwebeplätze).
  • Es kann die Funktionen der nächsten Seite und der vorherigen Seite erkennen und Eingabeaufforderungen angeben, wenn die Seite nicht gedreht werden kann.
  • Zeigt die Gesamtzahl der Daten, die Anzahl der Daten pro Seite und die aktuelle Seitennummer an.

Dies ist das Ende dieses Artikels über JavaScript+HTML -Implementierung des Systems für das Student -Informationsmanagement.

Das könnte Sie auch interessieren:
  • 12 Front-End-Frameworks, die für die Entwicklung des Back-End-Managementsystems geeignet sind (Zusammenfassung)
  • Java Student Management System Interface Einfache Implementierung (voll)
  • Java Practical Project, um den Implementierungsprozess des Community Property Management Systems zu verbessern
  • Tianyi Business System Backstage Management Account Cracked HTML -Version
  • Beispiel für die Implementierung von Front-End-HTML-Seitenvorlagen für das Projekt des Community Backend Management Systems

<<:  So ändern Sie die Standardcodierung von MySQL in Linux

>>:  Analyse verschiedener Fehler bei Sortierregeln für MySQL-Tabellen

Artikel empfehlen

Vue-Projekt @change mehrere Parameter, um mehrere Ereignisse zu übergeben

Erstens gibt es nur ein Änderungsereignis. change...

Kopieren von JS-Objekten (Deep Copy und Shallow Copy)

Inhaltsverzeichnis 1. Oberflächliche Kopie 1. Obj...

Natives JS zum Erstellen einer Drag-Fotowand

Dieser Artikel zeigt Ihnen eine verschiebbare Fot...

Hinweise zur Adresszuordnung von Gerätetreibern im Linux-Kernel

#include <asm/io.h> #define ioremap(Cookie,...

So stellen Sie versehentlich gelöschte Nachrichtendateien unter Linux wieder her

Wenn Dateien von einem Prozess verwendet und vers...

Analyse des Prinzips und der Funktion der MySQL-Datenbank-Master-Slave-Replikation

Inhaltsverzeichnis 1. Datenbank-Master-Slave-Klas...

Optimierung der Web-Frontend-Leistung

Best Practices für die Web-Frontend-Optimierung: ...

Lernen Sie die schwarze Technologie der Union-All-Verwendung in MySQL 5.7 in 5 Minuten

Leistung von „Union All“ in MySQL 5.6 Teil 1: MyS...

JavaScript zur Implementierung des Flugzeugkriegsspiels

In diesem Artikel erfahren Sie, wie Sie mit Canva...

MySql 8.0.16-win64 Installations-Tutorial

1. Entpacken Sie die heruntergeladene Datei wie u...

Detaillierte Erklärung des Befehlsmodus in der Javascript-Praxis

Inhaltsverzeichnis Definition Struktur Beispiele ...

So legen Sie eine statische IP für den Ubuntu 18.04-Server fest

1. Hintergrund Netplan ist ein neues Befehlszeile...

Ubuntu MySQL-Anmeldenamen und -Passwort anzeigen und ändern, phpmyadmin installieren

Nach der Installation von MySQL geben Sie mysql -...

MySQL nimmt die durch Kommas getrennten Werte aus einem Feld heraus, um ein neues Feld zu bilden

1Beispiel: Um die in Abbildung 1 gezeigten Felder...

Anleitung zur Vermeidung von Docker Win Ping-Fehlern bei Containern

Über Win Docker-Desktop möchte ich mich mit der C...