Los requisitos son los siguientes:
Escriba una página HTML con un formulario que almacene la información del usuario, que incluya: nombre de usuario, contraseña, nombre, correo electrónico, número de teléfono, QQ y número de identificación.
Ahora necesitamos agregar, eliminar, modificar dinámicamente la tabla a través de JS (solo operaciones de memoria):
Primero, use JS para cargar 3 registros de inicialización al cargar la página;
Hay un botón para agregar registros, y después de hacer clic, aparece una capa DIV para proporcionar entrada, lo que requiere que cada campo se ajuste al formato de entrada y no pueda estar vacío:
Nombre de usuario: inglés + número + bajo;
Contraseña: inglés + dígito + subrayado + 6 o superior;
Nombre: chino;
Correo electrónico, número de teléfono, QQ y número de identificación cumplen con el formato;
Cada registro se modifica o elimina;
Modifique de manera similar a Agregar y lea el valor original;
Código de página HTML:
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js Add-to-deletion v1.0</title> <script src="js/test.js" type="text/javascript" charset="utf-8"></script></head><body ><center> <br/> <br/> <h2> JS Agregar a To-eleletion v1.0 </h2> <br/> <br/> <a href = "javascript: showDinput ();"> Agregar datos </a> <br/> <br/> <divil <d <ly table = "text-align: centro" id = "table" <th> name </th> <th> correo electrónico </th> <th> tel </th> <th> qq </th> <th> número de tarjeta de identidad </th> <th> operación </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 = "color: azul; cursor: puntero;" onClick = "updaterow (this);" > Modificar <a> <a style = "color: azul; cursor: puntero;" onClick = "delrow (this);"> delete </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: azul; cursor: pointer;" onClick = "updaterow (this);"> modificar <a> <a style = "color: azul; cursor: pointer;" onClick = "Delrow (this);"> Eliminar </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> 570205197405213513 </td> <td> <a style = "color: azul; cursor: pointer;" onClick = "updaterow (this);"> modificar </a> </td> </tr> </table> </div> <div style = "display: none" id = "addinfo"> <borm> <br> username: (nombre de usuario solo puede usarse en inglés + números o subscore) <br> <input type = "Id =" username "/> <<br> <! English Subserscore o Numbers-> Contraseña: (inglés + números o subrayamiento, longitud no menor que 6) <br> <input type = "text" id = "contraseña"/> <br> nombre: (solo caracteres chinos) <br> <input type = "text" id = "name"/> <br> correo electrónico: <br> <rype type = "text" id = "correo electrónico"/> <br> teléfono: <br> <bype type de input type = "Id" Id "ID"/"". qq: <br> <input type = "text" id = "qq"/> <br> tarjeta de identificación: <br> <input type = "text" id = "uid"/> <br> <br> <input type = "botón" value = "enviar" oncclick = "addInfo ()" id = "btn_add"> <input type = "value" value = "subt" onclick = "updatefo () ()") ")") () style = "Display: None" id = "BTN_UPDATE"> <input type = "button" value = "cancel" onClick = "HiDeadDinput ()"> </form> </div> </center> </body> </html>
Código JS:
var fila = 0; // Defina el número global de filas para modificar var reg_email = /^/w+((aban // se usa para juzgar el formato del buzón var reg_name =/^((/w*/d/w*[az]/w*) | (/w*[az]/w*/d/w*)) $/i; // se usa para juzgar el formato del nombre de usuario var reg_chinese =/^[/u0391-/uffe5]+$/; // se usa para juzgar el formato de nombre var reg_pass =/^((/w*/d/w*[az]/w*) | (/w*[az]/w*/d/w*)) $/i; // Usar para determinar el formato de contraseña // --- Obtener el número de línea ----- función getrow (r) {var i = r.parentnode.parentnode.rowindex; return i;} // --- Obtenga el número de línea ---- // ---- Elimine una línea determinada ------- función delrow (r) { document.getElementById('table').deleteRow(getRow(r));}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('UserName'). Value = ''; document.getElementById ('contraseña'). valor = ''; document.getElementById ('name'). valor = ''; document.getElementById ('correo electrónico'). valor = ''; document.getElementById ('Phone'). Value = ''; document.getElementById ('Phone'). Value = ''; document.getElementById ('Qq'). Value = ''; document.getElementById ('uid'). valor = '' ';} // ---- Borre el contenido del cuadro de información Agregar ------/---------- Mostrar el cuadro Agregar información ------------- Función showDinput () {document.getElementById (' addInfo '). style = "Display: block-enline"; document.getElementById ('btn_add'). style = "display: block-inline"; document.getElementById ('btn_update'). style = "display: none"; cleanAddinput (); } // ---- Muestre el cuadro de información Agregar ------/---- Ocultar el cuadro de información ADD ------ Función HiDeadDinput () {document.getElementByid ('addInfo'). Style = "Display: None";} //--ocultar información ADMA Box----/------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- email = document.getElementById ('correo electrónico'). valor; var phone = document.getElementById ('Phone'). Valor; var qq = document.getElementById ('qq'). valor; var uid = document.getElementById ('uid'). valor; VAR JURICIÓN = TRUE; // utilizado para determinar si la información del formulario cumple si (userName == '') {juzgar = false; alerta ('Ingrese el nombre de usuario'); } else if (contraseña == '') {juzgar = falso; alerta ('Ingrese la contraseña'); } else if (name == '') {juzgar = falso; alerta ('Ingrese su nombre'); } else if (correo electrónico == '') {juzgar = falso; alerta ('Ingrese su correo electrónico'); } else if (phone == '') {juzgar = falso; alerta ('Ingrese su teléfono'); } else if (uid == '') {juzgar = falso; alerta ('Ingrese su tarjeta de identificación'); } else if (uid.length! = 18) {juzgar = falso; alerta ('Ingrese su tarjeta de identificación'); } else if (uid.length! = 18) {juzgar = falso; alerta ('la tarjeta de identidad debe ser de 18 dígitos, complete correctamente'); } else if (qq.length <= 5 && qq.length> = 13) {juzgar = falso; alerta ('Ingrese el número QQ correctamente'); } else if (phone.length <3 && qq.length> 12) {juzgar = falso; alerta ('Ingrese el teléfono correctamente'); } else if (! reg_email.test (correo electrónico)) {juzgar = falso; alerta ('El formato de correo electrónico es incorrecto'); } else if (! reg_name.test (username)) {juzgar = falso; alerta ('El formato de nombre de usuario es incorrecto'); } else if (! reg_chinese.test (nombre)) {juzgar = falso; alerta ('El formato de nombre es incorrecto'); } else if ((! reg_pass.test (contraseña)) || contraseña.length <6) {juzgar = falso; alerta ('El formato de contraseña es incorrecto'); } return judge ;}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ document.getElementById ('contraseña'). valor; arr [2] = document.getElementById ('nombre'). Valor; arr [3] = document.getElementById ('correo electrónico'). valor; arr [4] = document.getElementById ('Phone'). Valor; arr [5] = document.getElementById ('Qq'). Value; arr [6] = document.getElementById ('uid'). valor; arr [7] = "<a style = 'Text-Align: Center; Color: Blue; Cursor: Pointer;' onClick = 'updaterow (this);'> modificar </a> <a style = 'text-align: Center; color: azul; cursor: pointer;' onClick = 'delrow (this);'> eliminar </a> "; var x = document.getElementById ('Tabla'). InserTrow (1); // Obtenga el primer objeto de fila para (var i = 0; i <arr.length; i ++) {x.insertcell (i) .innerhtml = arr [i]; // Inserte cada datos en cada columna de la primera fila con un bucle} } // ----------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- // Mostrar el formulario de modificación // enviar el botón para reemplazar documento.getElementById ('btn_add'). Style = "Display: None"; document.getElementById ('btn_update'). style = "display: block-inline"; insertinputFromQuery (QueryInfobyrow (fila)); } // ---- Modificar información basada en el número de línea ---- // ----- for (var m = 0; m <7; m ++) {arr [m] = document.getElementById ('table'). filas [fila] .cells [m] .innertext; } return arr; // devuelve los datos de esto línea}//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------- document.getElementById ('correo electrónico'). valor = arr [3]; document.getElementById ('Phone'). Value = arr [4]; document.getElementById ('qq'). valor = arr [5]; document.getElementById ('uid'). valor = arr [6]; } // ---- Pon la información de consulta en el formulario modificado ---- Función updateInfo () {if (jueces () == true) {alert ('modificado con éxito'); document.getElementById ('Tabla'). Deleterow (fila); // Eliminar la línea original insertInfo (); // inserta el valor modificado HideadDinput (); // Hideaddinput (); // HiDeadDModule} else {alert ('modificación fallida'); HiDeaddinput (); }}Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.