HTML tablica dodaje retke, kontrole i dinamičke podatke pomoću Jquery, php i Mysql

Napravit ćemo popis osoblja. Prvo ćemo stvoriti bazu podataka navodne tehnološke tvrtke pod nazivom infotec, a zatim osobnu tablicu u mysqlu, možemo koristiti sql kôd iz phpmyadmina ili bilo kojeg drugog upravitelja mysqla.

 IZRADI TABLICU AKO NE POSTOJI `personal` (` id` int (11) NOT NULL AUTO_INCREMENT, `name` varchar (100) NOT NULL,` area` varchar (100) NOT NULL, `set` varchar (100) NOT NULL, `e -pošta` varchar (100) NIJE NULA, PRIMARNI KLJUČ (` id`)) MOTOR = InnoDB ZADNJA KARSETA = latin1 AUTO_INCREMENT = 1; - - Ubacujemo neke podatke - UMETAJTE `osobne` (` id`, `name`,` area`, `position`,` email`) VRIJEDNOSTI (1, 'Carlos Alonso', 'Informática', 'Developer', '[email protected]'), (2, 'Jose Garrido', 'Administracija', 'Računovođa', '[email protected]'), (3, 'Ana Junin', 'Informática', 'Grafički dizajn' , '[email protected]'); 

Ovdje možemo vidjeti kako tablica izgleda nakon izvršavanja SQL koda.

POVEĆAJTE

Zatim ćemo stvoriti jednostavnu klasu u php -u za manipulaciju mysqlom, ova klasa se može ponovno koristiti u drugim projektima. Izrađujemo datoteku config.php ili classDB., Php i dodajemo sljedeći kod.

veza)) {$ this-> connection = (mysql_connect ("localhost", "root", "")) ili umrijeti (mysql_error ()); mysql_select_db ("infotec", $ this-> veza) ili umrijeti (mysql_error ()); }} upit javne funkcije ($ query) {$ result = mysql_query ($ query, $ this-> connection); if (! $ rezultat) {echo 'Pogreška MySQL:'. mysql_error (); Izlaz; } return $ result; } javna funkcija get retki ($ query) {return mysql_fetch_array ($ query); } ukupni redovi javne funkcije ($ query) {return mysql_num_rows ($ query); }}?> var13 ->

Sada ćemo stvoriti glavnu datoteku projekta koja će biti index.php, ako je moguće lokalni poslužitelj poput Xamppa, gdje ćemo upitati bazu podataka i prikazati osobnu tablicu u html tablici.

 MySQL (); // Konzultiramo osobnu tablicu $ query = $ db-> query ("SELECT * FROM personal"); ?> var13 ->
Ljudski resursi

 dobiti retke ($ query)) {?> var13 -> 
 
 
iskaznica
 
Ime
 
Područje
 
Položaj
 
E-mail
 
Radnje
 
 
 
 
 
 
 
 
 

 

Rezultat php koda koji prikazuje tablicu bit će sljedeći:

Zatim ćemo stvoriti datoteku stilskih listova pod nazivom stilovi CSS kako bi tablici i redovima dali neki dizajn kasnije kad mišem prijeđete preko njih.

Dodati ćemo datoteku na vrh web stranice

Uspjeli smo prikazati tablicu koju smo imali u mysqlu koristeći php i html. Sada ćemo stvoriti skriptu koja nam pomoću jquery -ja omogućuje dinamičko dodavanje i spremanje podataka bez preusmjeravanja weba i bez otvaranja drugog zaslona, ​​ali to radi u istom retku podataka.
U kodu ispod tablice dodajemo gumb za dozivanje jquery funkcije za dodavanje novih redaka.

Novi 

Nakon gumba dodat ćemo jquery skriptu koja će omogućiti dodavanje redaka

U skripti moramo koristiti nazive html elemenata kao matricu u slučaju da moramo dodati nekoliko redaka, a zatim će se podaci spremiti kao matrica, svaki na položaju od 0,1,2 koji će nas zatim čitati iz php -a .
Iz tog razloga naziv, na primjer, označava s dvije zagrade da se radi o matrici.
Kreiramo datoteku koja će bilježiti podatke u mysql bazu podataka, uzima podatke iz tekstualnih okvira i onda kad ih šaljemo, čitamo nizove i prolazimo kroz for petlju.

 MySQL (); // čitamo poslane podatke i spremamo ih u nizove $ name = $ _ POST ['name']; $ area = $ _ POST ['area']; $ post = $ _ POST ['post']; $ email = $ _ POST ['email']; // idemo kroz i ubacujemo podatke u mysql tablicu za ($ i = 0; $ i upit ($ sql);} // vraćamo se na početno zaglavlje stranice ('Lokacija: index.php');?> var13 - -> 

Kada pritisnemo gumb za spremanje, podaci će biti spremljeni u bazu podataka Mysql i vratit ćemo se na popis. Imajte na umu da nema provjera valjanosti i ovdje je samo namjera pokazati kako dodati redove u tablicu te lakše i ugodnije uređivati ​​podatke na velikim popisima.

POVEĆAJTE

Ako želimo reći korisniku što treba unijeti u svaki okvir, možemo upotrijebiti svojstvo čuvara mjesta za pisanje komentara u tekstualni okvir. Ovaj će komentar nestati ako je nešto napisano u okvir za tekst i neće se spremiti ako se ništa ne napiše, služi samo za označavanje korisniku koju vrstu podataka treba upisati ili neku drugu naznaku koja mu pomaže pri unosu podataka.
Da bismo to učinili, mijenjamo skriptu koja generira novi redak, dodajemo rezervirano mjesto u svaki tekstualni okvir i odgovarajući komentar ili naznaku koju želimo prikazati korisniku.

 var redak = '
 '+ ''+ ''+ ''+ '

'; 

POVEĆAJTE

Prilikom umetanja novog retka vidjet ćemo oznake u svakom tekstualnom okviru. Osim skripte za dodavanje redaka, mogli bismo implementirati skriptu za provjeru valjanosti podataka iz svakog tekstualnog okvira pomoću dodatka jquery.validator. U drugom vodiču kasnije ćemo vidjeti kako urediti podatke i izbrisati podatke i odgovarajući redak tablice čitanjem podataka iz ID -a ćelije za dinamičko stvaranje radnji uređivanja i brisanja u istoj HTML tablici.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod