Les exigences sont les suivantes:
Écrivez une page HTML avec un formulaire qui stocke les informations d'utilisateur, notamment: Nom d'utilisateur, mot de passe, nom, e-mail, numéro de téléphone, QQ et numéro d'identification.
Nous devons maintenant ajouter, supprimer, modifier et vérifier la table via JS (juste les opérations de mémoire):
Tout d'abord, utilisez JS pour charger 3 enregistrements d'initialisation lors du chargement de la page;
Il y a un bouton pour ajouter des enregistrements, et après avoir cliqué, une couche Div apparaît pour fournir une entrée, nécessitant que chaque champ doit être conforme au format d'entrée et ne peut pas être vide:
Nom d'utilisateur: anglais + numéro + sous-traitant;
Mot de passe: anglais + chiffre + trait de soulignement + 6 ou plus;
Nom: Chinois;
Email, numéro de téléphone, QQ et numéro d'identification répondent au format;
Chaque enregistrement est modifié ou supprimé;
Modifier de manière similaire pour ajouter et lire la valeur d'origine;
Code de page HTML:
<Html> <A-thead> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <itle> js add-to-serition v1.0 </ title> <script src = "js / test.js" type = "text / javascript" charset = "utf-8"> </ script> <br/> <br/> <h2> js add-to-to-deletion v1.0 </h2> <br/> <br/> <a href = "javascript: showAddinput ();"> Ajouter des données </a> <br/> <br/> <DIv> <Table Style = "Text-Align: Center" id = "Table <h> name </ th> <th> e-mail </ th> <th> tel </th> <th> qq </th> <th> Numéro de carte d'identité </th> <th> Opération </th> </tr> <tr> <td> a1 </td> <td> 123 </td> <td> a </td> <td> [email protected] </td> <Td> 123456789 </td> <td> 40040044 </td> <td> 270205197405213513 </td> <td> <a style = "couleur: bleu; curseur: pointeur;" onclick = "updaterow (this);" > Modifier <a> <a style = "couleur: bleu; curseur: pointeur;" onclick = "Delrow (this);"> supprimer </a> </td> </tr> <tr> <td> a2 </td> <td> 456 </td> <td> b </td> <td> b </td> <td> [email protected] </td> <td> 987654321 </td> <Td> 30030033 </td> <Td> 470205197405213513 </td> <td> <a style = "Color: Blue; Curseur: pointeur;" onclick = "updaterow (this);"> modifier <a> <a style = "couleur: bleu; curseur: pointeur;" onclick = "Delrow (this);"> supprimer </a> </td> </tr> <tr> <td> a3 </td> <td> 789 </td> <td> c </td> <td> c </td> <td> [email protected] </td> <td> 800800820 </td> <td> <td> <td> 800800820 </td> <td> <td> <td> 800800820 </td> <td> <td> <td> 800800820 </td> <td> <td> <td> 800800820 </td> <td> <td> <td> 800800820 </td> <td> <td> <td> 800800820 </td> <td> 570205197405213513 </td> <td> <a style = "Color: Blue; Cursor: Pointer;" onclick = "updaterow (this);"> modifier </a> </td> </tr> </s table> </ div> <div style = "display: non" id = "addinfo"> <form> <br> nom d'utilisateur: (nom d'utilisateur peut être utilisé uniquement en anglais + nombres ou sous-traits) <br> <entrée type = "text" id = "userName" /> <br> <br> <! Soulignement ou numéros -> Mot de passe: (anglais + nombres ou soulignement, longueur non inférieure à 6) <br> <entrée type = "text" id = "mot de passe" /> <br> Nom: (seulement les caractères chinois) <br> <entrée type = "Text" id = "name" /> <br> Email: <br> <bout qq: <br> <input type = "text" id = "qq" /> <br> carte d'identification: <br> <entrée type = "text" id = "uid" /> <br> <br> <input type = "Button" value = "soumi" onClick = "addInfo ()" id = "btn_add"> <pneum id = "btn_update"> <entrée type = "bouton" value = "annuler" onclick = "hideaddinput ()"> </ form> </div> </senter> </ body> </html>
Code js:
var row = 0; // Définissez le nombre global de lignes pour modifier var reg_email = /^/w+((-/w+)|(/./w+))*/@_a-za-z0-9-9++(/.|-)--SA-ZA-Z0-9BOSALYSE )*/. // utilisé pour juger le format de boîte aux lettres var reg_name = / ^ ((/ w * / d / w * [az] / w *) | (/ w * [az] / w * / d / w *)) $ / i; // Utilisé pour juger le format du nom d'utilisateur var reg_chinese = / ^ [/ u0391- / uffe5] + $ /; // Utilisé pour juger le format de nom var reg_pass = / ^ ((/ w * / d / w * [az] / w *) | (/ w * [az] / w * / d / w *)) $ / i; // utiliser pour déterminer le format de mot de passe // --- Obtenez le numéro de ligne ----- function getrow (r) {var i = r.parentNode.parentNode.RowIndex; return i;} // --- Obtenez le numéro de ligne ---- // ---- Supprimer une certaine ligne ------- Fonction Delrow (R) { document.getElementById('table').deleteRow(getRow(r));}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('Username'). Value = ''; document.getElementById ('Mot de passe'). Value = ''; document.getElementById ('name'). Value = ''; document.getElementById ('e-mail'). Value = ''; document.getElementById ('téléphone'). Value = ''; document.getElementById ('téléphone'). Value = ''; document.getElementById ('qq'). Value = ''; document.getElementById ('uid'). Value = '';} // ---- Effacez le contenu de la zone d'informations Ajouter ----- / ---------- Afficher la boîte d'informations Ajouter ------------- Fonction ShowAdDinput () {document.getElementyId ('AddInfo'). Style = "Display: Block-inline"; document.getElementById ('btn_add'). style = "affiche: block-inline"; document.getElementById ('btn_update'). style = "affiche: aucun"; CleanAddInput (); } // ---- Afficher la zone d'informations Ajouter ----- / ---- Masquer Ajouter une boîte d'informations ------ Fonction HideadDinput () {document.getElementyid ('addInfo'). Style = "Affichage: Aucun";} // ---- Masquer Ajouter des informations Box----/------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- email = document.getElementById ('e-mail'). Valeur; var téléphone = document.getElementById ('téléphone'). valeur; var qq = document.getElementByid ('qq'). valeur; var uid = document.getElementById ('uid'). valeur; var juge = true; // Utilisé pour déterminer si les informations de formulaire répondent si (nom d'utilisateur == '') {juge = false; alert ('Veuillez entrer le nom d'utilisateur'); } else if (mot de passe == '') {juge = false; alert ('Veuillez entrer le mot de passe'); } else if (name == '') {juge = false; alert ('Veuillez entrer votre nom'); } else if (email == '') {juge = false; alert («Veuillez saisir votre e-mail»); } else if (phone == '') {juge = false; alert («Veuillez saisir votre téléphone»); } else if (uid == '') {juge = false; alert («Veuillez saisir votre carte d'identité»); } else if (uid.length! = 18) {juge = false; alert («Veuillez saisir votre carte d'identité»); } else if (uid.length! = 18) {juge = false; alerte («la carte d'identité doit être à 18 chiffres, veuillez remplir correctement»); } else if (qq.length <= 5 && qq.length> = 13) {juge = false; alert ('Veuillez saisir correctement le numéro QQ'); } else if (phone.length <3 && qq.length> 12) {juge = false; alert («Veuillez saisir le téléphone correctement»); } else if (! reg_email.test (e-mail)) {juge = false; alert («Le format de messagerie est incorrect»); } else if (! reg_name.test (nom d'utilisateur)) {juge = false; alert («le format de nom d'utilisateur est incorrect»); } else if (! reg_chinese.test (name)) {juge = false; alert ('le format de nom est incorrect'); } else if ((! Reg_pass.test (mot de passe)) || Password.length <6) {juge = false; alert ('Le format de mot de passe est incorrect'); } return judge ;}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ document.getElementById ('Mot de passe'). Valeur; arr [2] = document.getElementById ('name'). valeur; arr [3] = document.getElementById ('e-mail'). valeur; arr [4] = document.getElementById ('téléphone'). valeur; arr [5] = document.getElementByid ('qq'). valeur; arr [6] = document.getElementById ('uid'). valeur; arr [7] = "<a style = 'text-align: Centre; couleur: bleu; curseur: pointeur;' onClick = 'updaterow (this);'> modifier </a> <a style = 'text-adign: Center; couleur: bleu; curseur: pointeur;' onClick = 'Delrow (this);'> supprimer </a> "; var x = document.getElementById ('table'). insertrow (1); // Obtenez le premier objet de ligne pour (var i = 0; i <arr.length; i ++) {x.insertCell (i) .InnerHtml = arr [i]; // insérer chaque données dans chaque colonne de la première ligne avec une boucle} } // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- // Affichez le formulaire de modification // le bouton Soumettre pour remplacer document.getElementByid ('btn_add'). Style = "affiche: aucun"; document.getElementById ('btn_update'). style = "affichage: block-inline"; insertInputFromQuery (queryInfobyrow (ligne)); } // ---- Modifier les informations basées sur le numéro de ligne ---- // ------ Fichier QueryInfobyrow (R) {var arr = new Array (); pour (var m = 0; m <7; m ++) {arr [m] = document.getElementById ('table'). lignes [row] .cells [m] .InnerText; } return arr; // renvoie les données de ce doubler}//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('e-mail'). Value = arr [3]; document.getElementById ('téléphone'). Value = arr [4]; document.getElementById ('qq'). valeur = arr [5]; document.getElementById ('uid'). valeur = arr [6]; } // ---- Mettez les informations de requête dans le formulaire modifié ---- Fonction UpdateInfo () {if (juge () == true) {alert ('modifié avec succès'); document.getElementById ('Table'). DeleterOw (Row); // Supprimer la ligne d'origine insertInfo (); // insérer la valeur modifiée hideaddinput (); // HideadDinput (); // hideaddmodule} else {alert ('modification failli'); HideadDinput (); }}Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.