Html tabula pievieno rindas, vadīklas un dinamiskus datus, izmantojot Jquery, php un Mysql

Mēs izveidosim personāla sarakstu. Vispirms mēs izveidosim domājamā tehnoloģiju uzņēmuma datu bāzi ar nosaukumu infotec un pēc tam mysql personisko tabulu, mēs varam izmantot SQL kodu no phpmyadmin vai jebkura cita mysql pārvaldnieka.

 IZVEIDOT TABULU, JA TĀ PASTĀV "personisks" ("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, PRIMARY KEY (` id`)) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; - - Mēs ievietojam dažus datus - INSERT INTO "personal" ("id", "name", "area", "position", "email") VALUES (1, 'Carlos Alonso', 'Informática', 'Developer', '[email protected]'), (2, 'Jose Garrido', 'Administration', 'Accountant', '[email protected]'), (3, 'Ana Junin', 'Informática', 'Design Graphic' , '[email protected]'); 

Šeit mēs varam redzēt, kā tabula izskatās pēc SQL koda izpildes.

PALIELINĀT

Tālāk mēs izveidosim vienkāršu klasi php, lai manipulētu ar mysql, šo klasi var atkārtoti izmantot citos projektos. Mēs izveidojam failu config.php vai classDB., Php un pievienojam šādu kodu.

savienojums)) {$ this-> savienojums = (mysql_connect ("localhost", "root", ""))) vai mirst (mysql_error ()); mysql_select_db ("infotec", $ šis-> savienojums) vai mirst (mysql_error ()); }} publisku funkciju vaicājums ($ query) {$ result = mysql_query ($ query, $ this-> savienojums); if (! $ result) {echo 'MySQL Error:'. mysql_error (); Izeja; } atgriezt $ rezultātu; } publiska funkcija get rindas ($ query) {return mysql_fetch_array ($ query); } publiskās funkcijas kopējās rindas ($ query) {return mysql_num_rows ($ query); }}?> var13 ->

Tagad mēs izveidosim projekta galveno failu, kas būs index.php, ja iespējams, vietējais serveris, piemēram, Xampp, kur mēs vaicāsim datu bāzei un parādīsim personīgo tabulu html tabulā.

 MySQL (); // Mēs konsultējamies ar personīgo tabulu $ query = $ db-> query ("SELECT * FROM personal"); ?> var13 ->
Cilvēku resursi

 iegūt rindas ($ query)) {?> var13 -> 
 
 
ID
 
Vārds
 
Platība
 
Pozīcija
 
E-pasts
 
Darbības
 
 
 
 
 
 
 
 
 

 

Tabulā redzamā php koda rezultāts būs šāds:

Pēc tam mēs izveidosim stila lapu failu ar nosaukumu stili CSS lai tabulai un rindām vēlāk piešķirtu noformējumu, kad uzvedīsit peli.

Mēs pievienosim failu tīmekļa lapas galvai

Mums ir izdevies parādīt tabulu, kas mums bija mysql, izmantojot php un html. Tagad mēs izveidosim skriptu, kas, izmantojot jquery, ļauj dinamiski pievienot un saglabāt datus, nenovirzot tīmekli un neatverot citu ekrānu, bet darot to tajā pašā datu rindā.
Kodā zem tabulas mēs pievienojam pogu, lai izsauktu funkciju jquery, lai pievienotu jaunas rindas.

Jauns 

Pēc pogas mēs pievienosim jquery skriptu, kas ļaus pievienot rindas

Skriptā mums ir jāizmanto html elementu nosaukumi kā matrica, ja mums jāpievieno vairākas rindas, tad dati tiks saglabāti kā matrica, katra no tām pozīcijā no 0,1,2, kas pēc tam nolasa mūs no php .
Šī iemesla dēļ nosaukums, piemēram, ar divām iekavām norāda, ka tā ir matrica.
Mēs izveidojam failu, kas ierakstīs datus mysql datu bāzē, tas ņem datus no tekstlodziņiem un pēc tam, kad mēs tos nosūtām, mēs lasām masīvus un ejam cauri for.

 MySQL (); // mēs nolasām nosūtītos datus un uzglabājam tos masīvos $ name = $ _ POST ['nosaukums']; $ area = $ _ POST ['apgabals']; $ post = $ _ POST ['ziņa']; $ email = $ _ POST ['e -pasts']; // mēs ejam cauri un ievietojam datus mysql tabulā ($ i = 0; $ i vaicājums ($ sql);} // mēs atgriežamies pie sākotnējās lapas galvenes ('Location: index.php');?> var13 - -> 

Nospiežot saglabāšanas pogu, dati tiks saglabāti Mysql datu bāzē, un mēs atgriezīsimies sarakstā. Paturiet prātā, ka nav apstiprinājumu, un šeit ir tikai parādīts, kā tabulai pievienot rindas un lai vieglāk un ērtāk varētu rediģēt informāciju lielos sarakstos.

PALIELINĀT

Ja mēs vēlamies pateikt lietotājam, kas jāievada katrā lodziņā, mēs varam izmantot viettura īpašību, lai tekstlodziņā ierakstītu komentāru. Šis komentārs pazudīs, ja tekstlodziņā būs kaut kas rakstīts, un tas netiks saglabāts, ja nekas netiks rakstīts, tas tikai kalpo, lai norādītu lietotājam, kāda veida datus rakstīt, vai kādu citu norādi, kas viņam palīdz, ievadot datus.
Lai to izdarītu, mēs mainām skriptu, kas ģenerē jauno rindu, katram tekstlodziņam pievienojam vietturi un atbilstošo komentāru vai norādi, ko vēlamies parādīt lietotājam.

 var rinda = '
 '+ ''+ ''+ ''+ '

'; 

PALIELINĀT

Ievietojot jaunu rindu, mēs redzēsim norādes katrā tekstlodziņā. Papildus skriptam rindu pievienošanai mēs varētu ieviest skriptu, lai apstiprinātu datus no katras tekstlodziņa ar spraudni jquery.validator. Citā apmācībā mēs vēlāk redzēsim, kā rediģēt datus un dzēst datus un atbilstošo tabulas rindu, lasot datus no šūnas ID, lai dinamiski izveidotu rediģēšanas un dzēšanas darbības tajā pašā HTML tabulā.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu