Die Anforderungen sind wie folgt:
Schreiben Sie eine HTML -Seite mit einem Formular, das Benutzerinformationen speichert, einschließlich: Benutzername, Kennwort, Name, E -Mail, Telefonnummer, QQ und ID -Nummer.
Jetzt müssen wir die Tabelle dynamisch hinzufügen, löschen, ändern und überprüfen (nur Speichervorgänge):
Verwenden Sie zunächst JS, um 3 Initialisierungsdatensätze beim Laden der Seite zu laden.
Es gibt eine Schaltfläche zum Hinzufügen von Datensätzen, und nach dem Klicken wird eine Div -Ebene angezeigt, um Eingänge bereitzustellen. Damit muss jedes Feld dem Eingangsformat entsprechen und kann nicht leer sein:
Benutzername: Englisch + Nummer + Unterstrich;
Passwort: Englisch + Ziffer + Unterstrich + 6 oder höher;
Name: Chinesisch;
E -Mail, Telefonnummer, QQ und ID -Nummer erfüllen das Format.
Jeder Datensatz wird modifiziert oder gelöscht;
Ändern Sie ähnlich wie das Hinzufügen und lesen Sie den ursprünglichen Wert vor.
HTML -Seitencode:
<html> <head> <meta http-äquiv = "content-type" content = "text/html; charSet = utf-8"/> <title> js add-deletion v1.0 </title> <script src = "js/test.js" type = "text/javascript" charset = "utf-8" <br/> <br/> <h2> js add-to-to-deletion v1.0 </h2> <br/> <br/> <a href = "javaScript: showaddinput (); <Th> Name </th> <th> E -Mail </th> <th> Tel </th> <Th> qq </th> <Th> Identitätskartennummer </th> <th> Operation </th> </tr> <tr> <td> a1 </td> <td> 123 </td> </td> </td> <td> <td> <td> <Td> <Td> 123456789 </td> <td> 40040044 </td> <td> 270205197405213513 </td> <td> <a style = "color: blau: cursor: zeiger;" Onclick = "Updaterow (this);" > Modify <a> <a style = "color: blau; cursor: pointer;" onclick = "delrow (this);"> delete </a> </td> </tr> <tr> <td> a2 </td> <td> 456 </td> <td> b </td> <td> b </td> <td> b@qqq. <td> 30030033 </td> <td> 470205197405213513 </td> <td> <a style = "color: blau; Cursor: Zeiger;" onclick = "updaterow (this);"> modify <a> <a style = "color: blau; cursor: pointer;" onclick="delRow(this);">Delete</a></td> </tr> <tr> <td>A3</td> <td>789</td> <td>c</td> <td>c</td> <td>[email protected]</td> <td>800800820</td> <td>30030030</td> <td> 570205197405213513 </td> <td> <a style = "color: blau; cursor: pointer;" onclick = "updaterow (this);"> modify </a> </td> </tr> </table> </div> <div style = "display: Keine" id = "addInfo"> <Form> <br> Benutzername: (Benutzername kann nur in Englisch + Zahlen verwendet werden. English underscore or numbers--> Password: (English + numbers or underscore, length not less than 6)<br><input type="text" id="password"/><br> Name: (Only Chinese characters)<br><input type="text" id="name"/><br> Email:<br><input type="text" id="email"/><br> Phone:<br><input type="text" id="phone"/><br> qq: <br> <Eingabe type = "text" id = "qq"/> <br> id Card: <br> <Eingabe type = "text" id = "uid"/> <br> <br> <Eingabe type = "button" value = "surenden" onclick = "addinfo ()" id = "btn_add"> <Eingabe type = "doppeltyp" updo. id = "btn_update"> <Eingabe type = "button" value = "cancel" onclick = "hideaddInput ()"> </form> </div> </center> </body> </html>
JS -Code:
var row = 0; // Definieren Sie die globale Anzahl von Zeilen, um var reg_email = /^/w+ zu ändern, aktualisiert. // Wird verwendet, um das Mailbox -Format zu beurteilen var reg_name =/^(/w*/d/w*[az]/w*) | (/w*[az]/w*/d/w*)) $/i; // Wird verwendet, um das Benutzername-Format zu beurteilen var reg_chinese =/^[/u0391-/uffe5]+$/; // Wird verwendet, um das Namensformat zu beurteilen var reg_pass =/^(/w*/d/w*[az]/w*) | (/w*[az]/w*/d/w*)) $/i; // Verwenden Sie, um das Passwortformat // --- Die Zeilennummer ----- Funktion getrow (r) {var i = r.parentnode zu erhalten. Rückgabe i;} // --- Holen Sie sich die Zeilennummer ---- // ---- Löschen Sie eine bestimmte Zeile ------- Funktion Delrow (r) { document.getElementById ('Tabelle'). Deleterow (getRow (r));} // ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('Benutzername'). value = ''; document.getElementById ('Passwort'). value = ''; document.getElementById ('name'). value = ''; document.getElementById ('E -Mail'). value = ''; document.getElementById ('Telefon'). value = ''; document.getElementById ('Telefon'). value = ''; document.getElementById ('qq'). value = ''; document.getElementById ('uid'). value = '';} // ---- Die Inhalt des Informationsfelds hinzufügen ------/---------- Zeigen Sie das Informationsfeld hinzufügen ------------- Funktion showAddinput () {document.getElementById ('addinfo'). document.getElementById ('btn_add'). style = "display: blockinline"; document.getElementById ('btn_update'). style = "display: keine"; CleanAddinput (); } // ----- Zeigen Sie das Informationsfeld hinzufügen ------/---- Informationsfeld hinzufügen ------ Funktion hideaddinput () {document.getElementById ('addInfo'). Box----/------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- email = document.getElementById ('E -Mail'). Wert; var Telefon = document.getElementById ('Telefon'). Wert; var qq = document.getElementById ('qq'). Wert; var uid = document.getElementById ('uid'). Wert; var richter = true; // Wird verwendet, um festzustellen, ob die Formularinformationen erfüllt werden, wenn (userername == '') {Judge = false; ALERT ('Bitte geben Sie den Benutzernamen ein); } else if (password == '') {Judge = false; alarm ('Bitte geben Sie das Passwort ein); } else if (name == '') {Judge = false; alarm ('Bitte geben Sie Ihren Namen ein); } else if (E -Mail == '') {Judge = false; ALERT ('Bitte geben Sie Ihre E -Mail ein); } else if (Telefon == '') {Judge = false; ALERT ('Bitte geben Sie Ihr Telefon ein); } else if (uid == '') {Judge = false; ALERT ('Bitte geben Sie Ihre ID -Karte ein); } else if (uid.length! = 18) {Judge = false; ALERT ('Bitte geben Sie Ihre ID -Karte ein); } else if (uid.length! = 18) {Judge = false; ALERT ('Identitätskarte sollte 18 Ziffern sein, bitte korrekt ausfüllen'); } else if (qq.Length <= 5 && qq.length> = 13) {Judge = false; ALERT ('Bitte geben Sie die QQ -Nummer richtig ein); } else if (Telefon.length <3 && qq.length> 12) {Judge = false; alarm ('Bitte geben Sie das Telefon richtig ein); } else if (! reg_email.test (E -Mail)) {Judge = false; Alert ('E -Mail -Format ist falsch'); } else if (! reg_name.test (Benutzername)) {Judge = false; Alert ('Benutzername -Format ist falsch'); } else if (! reg_chinese.test (name)) {jury = false; alert ('Namensformat ist falsch'); } else if ((! reg_pass.test (password)) || password.length <6) {Judge = false; Alert ('Passwortformat ist falsch'); } return judge ;}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ document.getElementById ('Passwort'). Wert; arr [2] = document.getElementById ('Name'). Wert; arr [3] = document.getElementById ('E -Mail'). Wert; arr [4] = document.getElementById ('Telefon'). Wert; arr [5] = document.getElementById ('qq'). Wert; arr [6] = document.getElementById ('uid'). Wert; arr [7] = "<a style = 'text-align: Mitte; Farbe: Blau; Cursor: Zeiger;' onclick = 'updaterow (this);'> modify </a> <a style = 'text-align: center; Farbe: blau; Cursor: Zeiger;' onclick = 'delrow (this);'> delete </a> "; var x = document.getElementById ('Tabelle'). Insertrow (1); // das erste Zeilenobjekt für (var i = 0; i <arr.length; i ++) {x.insertcell (i) .innerhtml = arr [i]; // Fügen Sie jede Daten in jede Spalte der ersten Zeile mit einem Schleifen} ein } // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- // Zeigen Sie das Änderungsformular an // Senden Sie die Schaltfläche Senden, um document.getElementById ('btn_add') zu ersetzen. Style = "Anzeige: Keine"; document.getElementById ('btn_update'). style = "display: blockinline"; InsertInputFromQuery (queryInfobyrow (row)); } // ----- Informationen basierend auf Zeilennummer ---- // ------ Datei queryInfobyrow (r) {var arr = new Array (); für (var m = 0; m <7; m ++) {arr [m] = document.getElementById ('Tabelle'). Zeilen [Zeile] .Cells [m] .InNeText; } return arr; // Geben Sie die Daten davon zurück Linie}//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('E -Mail'). value = arr [3]; document.getElementById ('Telefon'). value = arr [4]; document.getElementById ('qq'). value = arr [5]; document.getElementById ('uid'). value = arr [6]; } // ----- Die Abfrageinformationen in das geänderte Formular ---- Funktion updateInfo () {if (Judge () == true) {alert ('erfolgreich geändert'); document.GetElementById ('Tabelle'). Deleterow (Zeile); // Löschen Sie die ursprüngliche Zeile insertInfo (); // Einfügen des geänderten Wertes Hideaddinput (); // hideaddinput (); // hideaddmodule} else {alert ('Modifikation fehlgeschlagen'); hideaddinput (); }}Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.