✅ Tabelul HTML adaugă rânduri, controale și date dinamice cu Jquery, php și Mysql

Cuprins

Resurse umane

Vom face o listă de personal. Mai întâi vom crea baza de date a unei presupuse companii de tehnologie numită infotec și apoi tabelul Personal în mysql, putem folosi codul sql de la phpmyadmin sau orice alt manager mysql.

 CREAȚI TABELUL DACĂ NU EXISTEZĂ `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) NOT NULL, KEY PRIMARY (` id`)) MOTOR = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; - - Inserăm câteva date - INSERAȚI ÎN „personal” („id”, „nume”, „zonă”, „poziție”, „e-mail”) VALORI (1, „Carlos Alonso”, „Informatică”, „Dezvoltator”, „calonso@info.com”), (2, „Jose Garrido”, „Administrație”, „Contabil”, „jgarrido@info.com”), (3, „Ana Junin”, „Informática”, „Design Graphic” , 'ajunin@info.com');

Aici putem vedea cum arată tabelul odată ce codul SQL este executat.

MARI

În continuare vom crea o clasă simplă în php pentru a manipula mysql, această clasă poate fi reutilizată în alte proiecte. Creăm fișierul config.php sau classDB., Php și adăugăm următorul cod.

conexiune)) {$ this-> connection = (mysql_connect ("localhost", "root", "")) sau die (mysql_error ()); mysql_select_db ("infotec", $ this-> connection) sau die (mysql_error ()); }} interogare funcție publică ($ interogare) {$ rezultat = mysql_query ($ interogare, $ aceasta-> conexiune); if (! $ result) {echo 'Eroare MySQL:'. mysql_error (); Ieșire; } returnează $ rezultat; } funcție publică obține rânduri ($ interogare) {return mysql_fetch_array ($ interogare); } rânduri totale funcție publică ($ interogare) {return mysql_num_rows ($ interogare); }}?> var13 ->

Acum vom crea fișierul principal al proiectului care va fi index.php, dacă este posibil un server local precum Xampp, unde vom interoga baza de date și vom arăta tabelul personal într-un tabel html.

 MySQL (); // Consultăm tabelul personal $ query = $ db-> query ("SELECT * FROM personal"); ?> var13 ->
Resurse umane

 obțineți rânduri ($ interogare)) {?> var13 -> 
 
 ID  Nume  Zonă  Poziţie  E-mail  Acțiuni

Rezultatul codului php care arată tabelul va fi următorul:

Vom crea apoi un fișier de foi de stil numit stiluri CSS pentru a da tabelului și rândurilor un design mai târziu, atunci când mouse-ul deasupra lor.

Vom adăuga fișierul în capul paginii web

Am reușit să arătăm tabelul pe care l-am avut în mysql folosind php și html. Acum vom crea un script care, prin intermediul jQuery, ne permite să adăugăm și să salvăm date dinamic, fără a redirecționa web-ul și fără a deschide un alt ecran, dar făcându-l în același rând de date.
În codul de sub tabel adăugăm un buton pentru a invoca funcția jquery pentru a adăuga rânduri noi.

Nou

După buton vom adăuga scriptul jquery care va face posibilă adăugarea de rânduri

În script trebuie să folosim numele elementelor html ca matrice în cazul în care trebuie să adăugăm mai multe rânduri, atunci datele vor fi salvate ca matrice, fiecare într-o poziție de la 0,1,2 care apoi ne citește din php .
Din acest motiv, numele, de exemplu, indică cu două paranteze că este o matrice.
Creăm fișierul care va înregistra datele în baza de date mysql, preluează datele din casetele de text și atunci când îl trimitem, citim matricele și trecem prin bucla for.

 MySQL (); // citim datele trimise și le stocăm în tablouri $ name = $ _ POST ['nume']; $ area = $ _ POST ['area']; $ post = $ _ POST ['post']; $ email = $ _ POST ['email']; // parcurgem și inserăm datele în tabelul mysql pentru ($ i = 0; interogare $ i ($ sql);} // ne întoarcem la antetul paginii inițiale ('Locație: index.php');?> var13 - ->

Când apăsăm butonul de salvare, datele vor fi salvate în baza de date Mysql și vom reveni la listă. Rețineți că nu există validări și este menit să arate aici cum să adăugați rânduri la un tabel și să puteți edita informațiile din listele mari mai ușor și mai confortabil.

MARI

Dacă vrem să îi spunem utilizatorului ce trebuie să introducă în fiecare casetă, putem folosi proprietatea substituent pentru a scrie un comentariu în caseta de text. Acest comentariu va dispărea dacă se scrie ceva în caseta de text și nu va fi salvat dacă nu este scris nimic, servește doar pentru a indica utilizatorului ce tip de date să scrie sau vreo altă indicație care îi ajută la introducerea datelor.
Pentru a face acest lucru, schimbăm scriptul care generează noul rând, adăugăm un substituent în fiecare casetă de text și comentariul sau indicația corespunzătoare pe care dorim să le arătăm utilizatorului.

 var rând = '
 '+ ''+ ''+ ''+ '

';

MARI

Când introduceți un rând nou, vom vedea indicațiile din fiecare casetă de text. În plus față de scriptul pentru a adăuga rânduri, am putea implementa un script pentru validarea datelor din fiecare casetă de text cu pluginul jquery.validator. Într-un alt tutorial vom vedea mai târziu cum să editați datele și să ștergeți datele și rândul corespunzător al tabelului citind datele din celula id pentru a crea dinamic acțiunile de editare și ștergere în același tabel HTML.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv