Html таблица добавя редове, контроли и динамични данни с Jquery, php и Mysql

Ще направим списък с персонал. Първо ще създадем базата данни на предполагаема технологична компания, наречена infotec, а след това личната таблица в mysql, можем да използваме sql кода от phpmyadmin или всеки друг mysql мениджър.

 СЪЗДАВАЙТЕ ТАБЛИЦА, АКО НЕ СЪЩЕСТВА "личен" ("id" int (11) NOT NULL AUTO_INCREMENT, "name" varchar (100) NOT NULL, `area` varchar (100) NOT NULL,` set` varchar (100) NOT NULL, `имейл` varchar (100) НЕ Е НУЛ, ОСНОВЕН КЛЮЧ (` id`)) ДВИГАТЕЛ = InnoDB ПО подразбиране ШАРСЕТ = latin1 AUTO_INCREMENT = 1; - - Вмъкваме някои данни - ВМЕСТВАМЕ В `лични` (` id`, `name`,` area`, `position`,` email`) ЦЕННОСТИ (1, 'Carlos Alonso', 'Informática', 'Developer', „[email protected]“), (2, „Хосе Гаридо“, „Администрация“, „Счетоводител“, „[email protected]“), (3, „Ана Жунин“, „Информатика“, „Графичен дизайн“ , '[email protected]'); 

Тук можем да видим как изглежда таблицата след изпълнението на SQL кода.

Увеличете

След това ще създадем прост клас в php за манипулиране на mysql, този клас може да се използва повторно в други проекти. Създаваме файла config.php или classDB., Php и добавяме следния код.

връзка)) {$ this-> връзка = (mysql_connect ("localhost", "root", "")) или умрете (mysql_error ()); mysql_select_db ("infotec", $ this-> връзка) или die (mysql_error ()); }} заявка за публична функция ($ query) {$ result = mysql_query ($ query, $ this-> връзка); if (! $ резултат) {echo 'MySQL Грешка:'. mysql_error (); изход; } return $ result; } обществена функция get редове ($ query) {return mysql_fetch_array ($ query); } общо редове на публична функция ($ query) {return mysql_num_rows ($ query); }}?> var13 ->

Сега ще създадем основния файл на проекта, който ще бъде index.php, по възможност локален сървър като Xampp, където ще запитаме базата данни и ще покажем личната таблица в html таблица.

 MySQL (); // Консултираме се с личната таблица $ query = $ db-> query ("SELECT * FROM personal"); ?> var13 ->
Човешки ресурси

 получите редове ($ query)) {?> var13 -> 
 
 
документ за самоличност
 
Име
 
■ площ
 
Позиция
 
Електронна поща
 
Действия
 
 
 
 
 
 
 
 
 

 

Резултатът от php кода, който показва таблицата, ще бъде следният:

След това ще създадем файл със стилови таблици, наречен стилове CSS за да придадете на таблицата и редовете някакъв дизайн по -късно при мишката върху тях.

Ще добавим файла към главата на уеб страницата

Успяхме да покажем таблицата, която имахме в mysql, използвайки php и html. Сега ще създадем скрипт, който чрез jquery ни позволява да добавяме и запазваме данни динамично, без да пренасочваме мрежата и без да отваряме друг екран, но да го правим в същия ред с данни.
В кода под таблицата добавяме бутон за извикване на функцията jquery за добавяне на нови редове.

Ново 

След бутона ще добавим скрипта jquery, който ще направи възможно добавянето на редове

В скрипта трябва да използваме имената на html елементите като матрица в случай, че трябва да добавим няколко реда, тогава данните ще бъдат записани като матрица, всеки от тях на позиция от 0,1,2, която след това ни чете от php .
Поради тази причина името например, показващо с две скоби, че е матрица.
Създаваме файла, който ще записва данните в базата данни на mysql, той взема данните от текстовите полета и след това, когато го изпращаме, четем масивите и преминаваме през цикъла for.

 MySQL (); // четем изпратените данни и ги съхраняваме в масиви $ name = $ _ POST ['name']; $ area = $ _ POST ['area']; $ post = $ _ POST ['пост']; $ email = $ _ POST ['имейл']; // преминаваме и вмъкваме данните в таблицата mysql за ($ i = 0; $ i заявка ($ sql);} // връщаме се към началната заглавка на страницата ('Местоположение: index.php');?> var13 - -> 

Когато натиснем бутона за запазване, данните ще бъдат записани в базата данни Mysql и ще се върнем към списъка. Имайте предвид, че няма валидиране и има за цел само да покаже тук как да добавяте редове към таблица и да можете да редактирате информацията в големи списъци по -лесно и по -удобно.

Увеличете

Ако искаме да кажем на потребителя какво да въведе във всяко поле, можем да използваме свойството на заместителя, за да напишем коментар в текстовото поле. Този коментар ще изчезне, ако нещо е написано в текстовото поле и няма да бъде запазено, ако нищо не е написано, той служи само за да посочи на потребителя какъв тип данни да напише или някаква друга индикация, която му помага при въвеждане на данни.
За да направим това, променяме скрипта, който генерира новия ред, добавяме заместител към всяко текстово поле и съответния коментар или индикация, която искаме да покажем на потребителя.

 var ред = '
 '+ ''+ ''+ ''+ '

'; 

Увеличете

При вмъкване на нов ред ще видим индикациите във всяко текстово поле. В допълнение към скрипта за добавяне на редове, бихме могли да внедрим скрипт за валидиране на данни от всяко текстово поле с приставката jquery.validator. В друг урок ще видим по -късно как да редактирате данни и да изтриете данни и съответния ред на таблицата, като прочетете данните от id на клетката, за да създадете динамично действията за редактиране и изтриване в същата HTML таблица.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка