Os requisitos são os seguintes:
Escreva uma página HTML com um formulário que armazena informações do usuário, incluindo: nome do usuário, senha, nome, email, número de telefone, QQ e número de identificação.
Agora precisamos adicionar, excluir, modificar e verificar dinamicamente a tabela através de JS (apenas operações de memória):
Primeiro, use o JS para carregar 3 registros de inicialização ao carregar a página;
Há um botão para adicionar registros e, depois de clicar, uma camada de div aparece para fornecer entrada, exigindo que cada campo deve estar em conformidade com o formato de entrada e não pode estar vazio:
Nome de usuário: inglês + número + sublinhado;
Senha: inglês + número + sublinhado + 6 dígitos ou mais;
Nome: Chinês;
Email, número de telefone, qq e número de identificação atendem ao formato;
Cada registro é modificado ou excluído;
Modificar de maneira semelhante para adicionar e ler o valor original;
Código da página HTML:
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> JS add-to-Dretion v1.0 </title> <script src = "js/test.js" type = "text/javascript" <br/> <br/> <H2> js add add-to-dretion v1.0 </h2> <br/> <br/> <a href = "javascript: showaddinput ();"> adicione dados </a> <br/> <br/> <div> <tabela "usen-align: central </a> <th> Nome </th> <the> email </th> <the> tel </th> <th> qq </th> <th> Número do cartão de identidade </th> <th> operação </th> </tr> <tr> <td> a1 </td> <td> 123 </td> <t> a <td> <td> <td> <td> <Td> 123456789 </td> <td> 40040044 </td> <td> 270205197405213513 </td> <td> <a style = "cor: azul; cursor: pontenter;" OnClick = "Updaterow (this);" > Modificar <a> <a style = "cor: azul; cursor: ponteiro;" ONCLICK = "Delrow (this);"> delete </a> </td> </tr> <tr> <td> a2 </td> <td> 456 </td> <td> b </td> <td> b </td> <td> [email protected] </td> <th4777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777721 <Td> 30030033 </td> <td> 470205197405213513 </td> <td> <a style = "cor: blue; cursor: pointer;" OnClick = "Updaterow (this);"> modificar <a> <a style = "cor: azul; 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 = "cor: azul; cursor: ponteiro;" OnClick = "Updaterow (this);"> Modify </a> </td> </tr> </tabela> </div> <div style = "display: nenhum" id = "addinfo"> <morm> <br> nome de usuário: (nome de usuário só pode ser usado em inglês + números ou subsistro) <br> <bump type = "text =" iDTEN = ")") "Nome de usuário pode ser usado apenas em inglês ou usescore) <br> <brbr =" "idenMern ="; Em inglês, sublinhado ou números-> Senha: (inglês + números ou sublinhado, comprimento não inferior a 6) <br> <input type = "text" id = "senha"/> <br> Nome: (apenas caracteres chineses) <br> <input type = "text" ida = "name"/> <br>: <br> <br> <brate type = "iD" "" "/" ID "/" Nome "/> <br>: <br> <br> <brate type =" text = "" "" "" id = "telefone"/> <br> qq: <br> <input type = "text" id = "qq"/> <br> cartão de id: <br> <input type = "text" id = "uid"/> <br> <br> <butter type = "button" "value" submit "oClick =" addinfo () "idpT =" bt = "" " OnClick = "UpdateInfo ()" Style = "Display: Nenhum" id = "btn_update"> <input type = "button" value = "cancel" onclick = "hideaddInput ()"> </morm> </div> </fenter> </body> </html>
Código JS:
var linha = 0; // Defina o número global de linhas para modificar var reg_email = /^/w+(--/w+)|(/./w+)*/@@. // usado para julgar o formato da caixa de correio var reg_name =/^((/w*/d/w*[az]/w*) | (/w*[az]/w*/d/w*)) $/i; // usado para julgar o formato de nome do usuário var reg_chinese =/^[/u0391-/uffe5]+$/; // usado para julgar o nome do formato var reg_pass =/^((/w*/d/w*[az]/w*) | (/w*[az]/w*/d/w*)) $/i; // use para determinar o formato de senha // --- obter o número da linha ----- function getRow (r) {var i = r.parent.entNode.Parnod.Rode. Retornar i;} // --- Obtenha o número da linha ---- // -----Exclua uma determinada linha ------- função delrow (r) { document.getElementById('table').deleteRow(getRow(r));}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('Nome de usuário'). Value = ''; document.getElementById ('senha'). value = ''; document.getElementById ('nome'). value = ''; document.getElementById ('email'). value = ''; document.getElementById ('telefone'). value = ''; document.getElementById ('telefone'). value = ''; document.getElementById ('qq'). value = ''; document.getElementById ('uid'). value = '';} // ---- Limpe o conteúdo da caixa de informação Add ------/---------- mostre a caixa de informação Add Information ----------------- Função ShowAddinput () {Document.getElementById ('addinfo'). style = "Display: Block-Inline"; document.getElementById ('btn_add'). style = "display: block-inline"; Document.getElementById ('BTN_UPDATE'). Style = "Display: Nenhum"; CleanAddinput (); } // ---- Mostre a caixa de informações Adicionar ------/---- Ocultar Caixa de informações Adicionar ------ função hideaddInput () {document.getElementById ('addinfo'). Style = "display: nenhum";} // ---- Ocultar informações Adicionar informações Box----/------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- email = document.getElementById ('email'). valor; var telefone = document.getElementById ('telefone'). Valor; var qq = document.getElementById ('qq'). var uid = document.getElementById ('uid'). var juiz = true; // usado para determinar se as informações do formulário atendem a if (nome de usuário == '') {juiz = false; Alert ('Por favor, digite o nome do usuário'); } else if (senha == '') {juiz = false; alerta ('digite a senha'); } else if (nome == '') {juiz = false; alerta ('por favor digite seu nome'); } else if (email == '') {juiz = false; alerta ('insira seu e -mail'); } else if (telefone == '') {juiz = false; alerta ('insira seu telefone'); } else if (uid == '') {juiz = false; alerta ('insira seu cartão de identificação'); } else if (uid.length! = 18) {juiz = false; alerta ('insira seu cartão de identificação'); } else if (uid.length! = 18) {juiz = false; alerta ('cartão de identidade deve ter 18 dígitos, preencha corretamente'); } else if (qq.length <= 5 && qq.length> = 13) {juiz = false; alerta ('digite o número QQ corretamente'); } else if (telefone.length <3 && qq.length> 12) {juiz = false; alerta ('insira o telefone corretamente'); } else if (! reg_email.test (email)) {juiz = false; alert ('formato de email está incorreto'); } else if (! reg_name.test (nome de usuário)) {juiz = false; alerta ('formato de nome de usuário está incorreto'); } else if (! reg_chinese.test (nome)) {juiz = false; alerta ('formato de nome está incorreto'); } else if ((! reg_pass.test (senha)) || senha.length <6) {juiz = false; alert ('formato de senha está incorreto'); } return judge ;}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ document.getElementById ('senha'). arr [2] = document.getElementById ('nome'). arr [3] = document.getElementById ('email'). arr [4] = document.getElementById ('telefone'). arr [5] = document.getElementById ('qq'). value; arr [6] = document.getElementById ('uid'). arr [7] = "<a style = 'text-align: Center; cor: azul; cursor: ponteiro;' OnClick = 'Updaterow (this);'> modificar </a> <a style = 'text-align: Center; cor: azul; cursor: pontenter;' OnClick = 'Delrow (this);'> excluir </a> "; var x = document.getElementById ('tabela'). insertrow (1); // Obtenha o primeiro objeto de linha para (var i = 0; i <arr.length; i ++) {x.insertCell (i) .innerhtml = arr [i]; // Insira cada dados em cada coluna da primeira linha com um loop} } // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- // Mostrar o Formulário de Modificação // Enviar o botão para substituir Document.getElementById ('BTN_ADD'). Style = "Display: None"; document.getElementById ('btn_update'). style = "display: block-inline"; insertInputFromQuery (queryinfobyrow (linha)); } // ---- Modificar informações com base na linha ---- // ------- Arquivo queryinfobyrow (r) {var arr = new Array (); for (var m = 0; m <7; m ++) {arr [m] = document.getElementById ('tabela'). linhas [linha] .Cells [m] .innerText; } retornar arr; // retorna os dados disso linha}//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('email'). value = arr [3]; document.getElementById ('telefone'). value = arr [4]; document.getElementById ('qq'). value = arr [5]; document.getElementById ('uid'). value = arr [6]; } // ---- Coloque as informações de consulta no formulário modificado ---- fun updateInfo () {if (juiz () == true) {alert ('modificado com sucesso'); document.getElementById ('tabela'). Deleterow (linha); // exclua a linha original insertinfo (); // insira o valor modificado hideaddinput (); // hideaddinput (); // hideaddmodule} else {alert ('modificação falhou'); hideaddinput (); }}O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.