Tabela html dodaje wiersze, kontrolki i dynamiczne dane za pomocą Jquery, php i Mysql

Sporządzimy listę personelu. Najpierw utworzymy bazę danych rzekomej firmy technologicznej o nazwie infotec, a następnie tabelę Personal w mysql, możemy użyć kodu sql z phpmyadmina lub dowolnego innego menedżera mysql.

 CREATE TABLE IF NOT EXISTS `personal` (`id` int (11) NOT NULL AUTO_INCREMENT, `name` varchar (100) NOT NULL, ` area` varchar (100) NOT NULL, `set` varchar (100) NOT NULL, `email` varchar (100) NIE NULL, KLUCZ PODSTAWOWY (` id`)) SILNIK = DOMYŚLNY ZESTAW ZNAKÓW InnoDB = latin1 AUTO_INCREMENT = 1; - - Wstawiamy jakieś dane - INSERT INTO `personal` (`id`, `name`,` area`, `position`,` email`) VALUES (1, 'Carlos Alonso', 'Informática', 'Developer', ' [email protected] '), (2, 'Jose Garrido', 'Administracja','Księgowy','[email protected]'), (3,'Ana Junin','Informática','Projektowanie grafiki' , ' [email protected] '); 

Tutaj możemy zobaczyć, jak wygląda tabela po wykonaniu kodu SQL.

POWIĘKSZAĆ

Następnie stworzymy prostą klasę w php do manipulacji mysql, ta klasa może być ponownie wykorzystana w innych projektach. Tworzymy plik config.php lub classDB., Php i dodajemy poniższy kod.

connection)) {$ this-> connection = (mysql_connect ("localhost", "root", "")) or die (mysql_error ()); mysql_select_db („infotec”, $ this-> connection) lub die (mysql_error ()); }} zapytanie funkcji publicznej ($zapytanie) {$wynik = mysql_query ($zapytanie, $to->połączenie); if (! $ wynik) {echo 'Błąd MySQL:'. mysql_error (); Wyjście; } zwraca wynik $; } funkcja public get rows (zapytanie $) {return mysql_fetch_array (zapytanie $); } liczba wierszy funkcji publicznej (zapytanie $) {return mysql_num_rows (zapytanie $); }}?> zm13 ->

Teraz utworzymy główny plik projektu, którym będzie index.php, jeśli to możliwe, serwer lokalny, taki jak Xampp, gdzie prześlemy zapytanie do bazy danych i pokażemy tabelę osobistą w tabeli html.

 MySQL (); // Sprawdzamy osobistą tabelę $ query = $ db-> query ("SELECT * FROM personal"); ?> zm13 ->
Zasoby ludzkie

 pobierz wiersze ($ zapytanie)) {?> var13 -> 
 
 
ID
 
Nazwa
 
Obszar
 
Pozycja
 
E-mail
 
działania
 
 
 
 
 
 
 
 
 

 

Wynik kodu php, który pokazuje tabelę, będzie następujący:

Następnie utworzymy plik arkuszy stylów o nazwie style CSS aby później nadać tabeli i wierszom jakiś wygląd po najechaniu na nie myszą.

Dodamy plik do nagłówka strony

Udało nam się pokazać tabelę, którą mieliśmy w mysql za pomocą php i html. Teraz stworzymy skrypt, który za pomocą jquery pozwoli nam dynamicznie dodawać i zapisywać dane bez przekierowywania sieci i bez otwierania kolejnego ekranu, ale robiąc to w tym samym wierszu danych.
W kodzie pod tabelą dodajemy przycisk do wywołania funkcji jquery w celu dodania nowych wierszy.

Nowy 

Po przycisku dodamy skrypt jquery, który umożliwi dodawanie wierszy

W skrypcie musimy używać nazw elementów html jako macierzy w przypadku, gdy musimy dodać kilka wierszy wtedy dane zostaną zapisane jako macierz, każdy w pozycji od 0,1,2 który następnie odczyta nas z php .
Z tego powodu nazwa, na przykład, wskazująca dwoma nawiasami, że jest to macierz.
Tworzymy plik, który będzie zapisywał dane w bazie mysql, pobiera dane z pól tekstowych a następnie wysyłając je odczytujemy tablice i przechodzimy przez pętlę for.

 MySQL (); // odczytujemy wysłane dane i przechowujemy je w tablicach $ name = $ _ POST ['name']; $obszar = $_POST ['obszar']; $ post = $ _ POST ['post']; $ e-mail = $ _ POST ['e-mail']; // przechodzimy i wstawiamy dane do tabeli mysql dla ($ i = 0; $ i zapytanie ($ sql);} // wracamy do początkowego nagłówka strony ('Location: index.php');?> var13 - -> 

Po naciśnięciu przycisku zapisz dane zostaną zapisane w bazie Mysql i wrócimy do listy. Należy pamiętać, że nie ma walidacji i ma ono na celu jedynie pokazanie, jak dodawać wiersze do tabeli i łatwiej i wygodniej edytować informacje na dużych listach.

POWIĘKSZAĆ

Jeśli chcemy powiedzieć użytkownikowi, co ma wpisać w każdym polu, możemy użyć właściwości placeholder, aby napisać komentarz w polu tekstowym. Ten komentarz zniknie, jeśli coś zostanie napisane w polu tekstowym i nie zostanie zapisany, jeśli nic nie zostanie zapisane, służy tylko do wskazania użytkownikowi, jaki typ danych ma wpisać lub innej wskazówki, która pomaga mu podczas wprowadzania danych.
W tym celu zmieniamy skrypt generujący nowy wiersz, do każdego pola tekstowego dodajemy symbol zastępczy oraz odpowiedni komentarz lub wskazanie, które chcemy pokazać użytkownikowi.

 var wiersz = '
 '+ ''+ ''+ ''+ '

'; 

POWIĘKSZAĆ

Podczas wstawiania nowego wiersza zobaczymy wskazania w każdym polu tekstowym. Oprócz skryptu do dodawania wierszy możemy zaimplementować skrypt do walidacji danych z każdego pola tekstowego za pomocą wtyczki jquery.validator. W innym samouczku zobaczymy później, jak edytować dane i usuwać dane oraz odpowiedni wiersz tabeli, odczytując dane z identyfikatora komórki, aby dynamicznie tworzyć akcje edycji i usuwania w tej samej tabeli HTML.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt