Требования следующие:
Напишите HTML -страницу с формой, в которой хранится пользовательская информация, включая: имя пользователя, пароль, имя, электронная почта, номер телефона, QQ и идентификационный номер.
Теперь нам нужно динамически добавить, удалять, изменять и проверить таблицу через JS (просто операции памяти):
Во -первых, используйте JS для загрузки 3 записей инициализации при загрузке страницы;
Есть кнопка для добавления записей, и после нажатия появляется слой Div, чтобы обеспечить вход, требующий, чтобы каждое поле соответствовали входному формату и не мог быть пустым:
Имя пользователя: английский + номер + подчеркивание;
Пароль: английский + номер + подчеркивается + 6 цифр или более;
Имя: Китайский;
Электронная почта, номер телефона, QQ и идентификационный номер соответствуют формату;
Каждая запись изменена или удалена;
Измените аналогично, чтобы добавить и прочитать исходное значение;
HTML -код страницы:
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> js add-delect v1.0 </title> <script src = "js/test.js" type = "text/javascript" charset = "utf-8"> </test.js "type =" text/javascript "charset =" utf-8 "> </test.js" <br/> <br/> <h2> js add-to-deletion v1.0 </h2> <br/> <br/> <a href = "javascript: showAddinput ();"> Добавить данные </a> <br/> <br/> <Div> <table style = "text-align: center" the Table "> <trt> <th> <th> us> us> </thrame <//th thas> <th> </thrame <//th Thase. <Th> имя </th> <Th> электронная почта </th> <Th> tel </th> <Th> QQ </th> <Th> номер идентификационной карты </th> <Th> операция </th> </tr> <tr> <td> a1 </td> <td> 123 </td> <td> </td> <td> aith <Td> 123456789 </td> <Td> 40040044 </td> <td> 270205197405213513 </td> <td> <a style = "Цвет: синий; курсор: указатель;" onclick = "updaterow (это);" > Изменить <a> <a style = "color: blue; cursor: pointer;" 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> 98765443211 </td> 987654321 </td> 987654321 </td> 987654321 </td> 987654321 </td> 987654321 </td> 987654321 </td> 987654321 </td> 987654321 </td> 987654321 </td> <td> 987654321 </td> </td> <TD> 30030033 </td> <Td> 470205197405213513 </td> <td> <a style = "Цвет: синий; cursor: pointer;" onclick = "updaterow (this);"> modify <a> <a style = "color: blue; 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> [email protected] <TD> 570205197405213513 </td> <td> <a style = "color: blue; cursor: pointer;" onclick = "Updaterow (this);"> Modify </a> </td> </tr> </table> </div> <div style = "display: none" id = "addInfo"> <FORD> <br> userName: (имя пользователя может использоваться только в английском языке или Underscore) <br> <input type = "id =" USerernam Английский подчеркивается или номера-> Пароль: (английский + числа или подчеркивание, длина не менее 6) <br> <input type = "text" id = "пароль"/> <br> Имя: (только китайские символы) <br> <input type = "text" id = "/> <br> email: <br> <input =" text "id =" Email "/> <br> <br> <br> <br> <pron ext expect"/"inteply ="/"/"/"/"/""/"/"/""/"/"/""/"ID ="/"/"/". QQ: <br> <input type = "text" id = "qq"/> <br> id card: <br> <input type = "text" id = "uid"/> <br> <br> <input type = "value =" onclick = "AddInfo ()" id = "btn_add"> <input = "value =" value "onclick =" advillin ":" anplose aviden elhope ":" anplose aviden elhope ":" Onclick = ")") id = "btn_update"> <input type = "cutting" value = "cancel" onclick = "hideaddinput ()"> </form> </div> </center> </body> </html>
JS -код:
var row = 0; // Определите глобальное количество строк, чтобы изменить var reg_email = /^/w+((-/w+)(/./w+))**/@+ // используется для оценки формата почтового ящика var reg_name =/^((/w*/d/w*[az]/w*) | (/w*[az]/w*/d/w*)) $/i; // используется для оценки формата имени пользователя var reg_chinese =/^[/u0391-/uffe5]+$/; // используется для оценки формата имени var reg_pass =/^((/w*/d/w*[az]/w*) | (/w*[az]/w*/d/w*)) $/i; // Использовать для определения формата пароля // --- Получить номер строки ----- function getRow (r) {var i = r.parentnode.parentnode.rowindex; вернуть i;} // --- Получить номер строки ---- // ---- Удалить определенную строку ------- Функция Delrow (r) { document.getElementById('table').deleteRow(getRow(r));}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementbyId ('username'). value = ''; document.getElementbyId ('пароль'). value = ''; document.getElementbyId ('name'). value = ''; document.getElementbyId ('email'). value = ''; document.getElementbyId ('телефон'). value = ''; document.getElementbyId ('телефон'). value = ''; document.getElementById ('QQ'). value = ''; document.getElementById ('uid'). value = '';} // ---- Очистить содержимое блока добавления информации -----/---------- Показать окно «Добавить информацию» -------------- Функция showAdDinput () {document.getElementById ('AddInfo'). Style = "Display-inline"; document.getElementbyId ('btn_add'). style = "display: block-inline"; document.getElementbyId ('btn_update'). style = "display: none"; leanadDinput (); } // ---- Покажите поле «Добавить информацию» -----/---- Скрыть поле добавить информацию ------ функция hideadDinput () {document.getElementById ('addInfo'). Style = "Display: none";} // ---- Скрыть добавить информацию Box----/------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- email = document.getelementbyid ('email'). value; var phone = document.getElementbyId ('телефон'). value; var QQ = document.getElementById ('QQ'). Value; var uid = document.getElementbyId ('uid'). value; var Judge = true; // используется для определения того, соответствует ли информация формы, если (username == '') {dude = false; ALERT («Пожалуйста, введите имя пользователя»); } else if (password == '') {dude = false; Alert («Пожалуйста, введите пароль»); } else if (name == '') {dude = false; Alert («Пожалуйста, введите свое имя»); } else if (email == '') {dude = false; Alert («Пожалуйста, введите свою электронную почту»); } else if (phone == '') {dude = false; Alert («Пожалуйста, введите свой телефон»); } else if (uid == '') {dude = false; Alert ('Пожалуйста, введите свою удостоверение личности »); } else if (uid.length! = 18) {dude = false; Alert ('Пожалуйста, введите свою удостоверение личности »); } else if (uid.length! = 18) {dude = false; Alert («Identity Card должен быть 18 цифр, пожалуйста, заполните правильно»); } else if (qq.length <= 5 && qq.length> = 13) {dude = false; Alert ('Пожалуйста, введите номер QQ правильно »); } else if (phone.length <3 && qq.length> 12) {dude = false; Alert («Пожалуйста, введите телефон правильно»); } else if (! reg_email.test (email)) {dude = false; оповещение («формат электронной почты неверен»); } else if (! reg_name.test (username)) {dude = false; оповещение («формат имени пользователя неверно»); } else if (! reg_chinese.test (name)) {dude = false; Alert («Формат имени неверно»); } else if ((! reg_pass.test (password)) || password.length <6) {dude = false; Alert («Формат пароля неверен»); } return judge ;}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ document.getElementById ('пароль'). Value; arr [2] = document.getElementbyId ('name'). value; arr [3] = document.getElementById ('email'). Value; arr [4] = document.getElementById ('телефон'). Value; arr [5] = document.getElementById ('QQ'). Value; arr [6] = document.getElementById ('uid'). value; arr [7] = "<a style = 'text-align: center; color: blue; cursor: pointer;' onclick = 'updaterow (this);'> modify </a> <a style = 'text-align: center; color: blue; cursor: pointer;' onclick = 'delrow (this);'> delete </a> "; var x = document.getElementById ('table'). INSERTROW (1); // Получить первый объект строки для (var i = 0; i <arr.length; i ++) {x.insertcell (i) .innerhtml = arr [i]; // Вставьте каждое данные в каждый столбец первой строки с циклом} }//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- // Показать форму модификации // Отправить кнопку для замены document.getElementById ('btn_add'). Style = "Display: none"; document.getElementbyId ('btn_update'). style = "display: block-inline"; insertinputFromQuery (QueryInfobyrow (ряд)); } // ---- Изменить информацию на основе номера строки ---- // ------- Файл QueryInfobyRow (r) {var arr = new Array (); for (var m = 0; m <7; m ++) {arr [m] = document.getElementbyId ('table'). Rows [row] .cells [m] .innerText; } return arr; // возвращать данные этого линия}//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementbyId ('email'). value = arr [3]; document.getElementbyId ('телефон'). value = arr [4]; document.getElementById ('QQ'). value = arr [5]; document.getElementById ('uid'). value = arr [6]; } // ---- Поместите информацию запроса в измененную форму ---- function updateInfo () {if (judge () == true) {alert ('модифицирован успешно'); document.getElementById ('table'). DeleteRow (row); // удалить исходную строку insertinfo (); // вставить модифицированное значение hideaddinput (); // hideaddinput (); // hideaddmodule} else {alert ('модификация не удалась'); hideaddinput (); }}Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.