Html lentelė prideda eilutes, valdiklius ir dinaminius duomenis su „Jquery“, „php“ ir „Mysql“

Sudarysime personalo sąrašą. Pirmiausia sukursime tariamos technologijų įmonės duomenų bazę, vadinamą „infotec“, o tada „Personal“ lentelę „mysql“, galime naudoti „phpmyadmin“ ar bet kurio kito „mysql“ tvarkyklės sql kodą.

 KURTI LENTELĘ, KAD NĖRA „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, PAGRINDINIS RAKTAS („ id “)) VARIKLIS =„ InnoDB DEFAULT CHARSET “= latin1 AUTO_INCREMENT = 1; - - Įterpiame kai kuriuos duomenis - INSERT INTO "personal" ("id", "name", "area", "position", "email") VERTĖS (1, "Carlos Alonso", "Informática", "Developer", „[email protected]“), (2, „Jose Garrido“, „Administracija“, „Buhalteris“, „[email protected]“), (3, „Ana Junin“, „Informática“, „Design Graphic“) , „[email protected]“); 

Čia matome, kaip atrodo lentelė, kai SQL kodas yra įvykdytas.

DIDELIS

Toliau mes sukursime paprastą klasę php, kad galėtume manipuliuoti mysql, šią klasę galima pakartotinai naudoti kituose projektuose. Sukuriame failą config.php arba classDB., Php ir pridedame šį kodą.

ryšys)) {$ this-> connection = (mysql_connect ("localhost", "root", ""))) arba mirti (mysql_error ()); mysql_select_db ("infotec", $ this-> ryšys) arba mirti (mysql_error ()); }} viešosios funkcijos užklausa ($ užklausa) {$ result = mysql_query ($ query, $ this-> connection); if (! $ result) {echo 'MySQL Error:'. mysql_error (); išėjimas; } grąžinti $ rezultatą; } viešoji funkcija gauti eilutes ($ query) {return mysql_fetch_array ($ query); } viešosios funkcijos visos eilutės ($ query) {return mysql_num_rows ($ query); }}?> var13 ->

Dabar sukursime pagrindinį projekto failą, kuris bus index.php, jei įmanoma, vietinis serveris, pvz., „Xampp“, kuriame atliksime užklausą duomenų bazėje ir parodysime asmeninę lentelę html lentelėje.

 MySQL (); // Mes konsultuojamės su asmenine lentele $ query = $ db-> query ("SELECT * FROM personal"); ?> var13 ->
Žmogiškieji ištekliai

 gauti eilutes ($ query)) {?> var13 -> 
 
 
ID
 
vardas
 
Plotas
 
Pozicija
 
Paštu
 
Veiksmai
 
 
 
 
 
 
 
 
 

 

Lentelę rodantis php kodo rezultatas bus toks:

Tada sukursime stiliaus lapų failą, pavadintą stiliai CSS kad vėliau, užvedus pelę ant stalo, lentelė ir eilutės būtų šiek tiek apipavidalintos.

Mes pridėsime failą prie tinklalapio galvos

Mums pavyko parodyti lentelę, kurią turėjome „mysql“, naudodami php ir html. Dabar mes sukursime scenarijų, kuris, naudojant „jquery“, leis mums dinamiškai pridėti ir išsaugoti duomenis, neperkreipiant žiniatinklio ir neatidarius kito ekrano, bet tai darant toje pačioje duomenų eilutėje.
Kodelyje po lentele pridedame mygtuką, norėdami iškviesti „jquery“ funkciją ir pridėti naujų eilučių.

Naujas 

Po mygtuko pridėsime „jquery“ scenarijų, kuris leis pridėti eilučių

Scenarijuje mes turime naudoti html elementų pavadinimus kaip matricą, jei mums reikia pridėti keletą eilučių, tada duomenys bus išsaugoti kaip matrica, kiekviena iš jų yra 0,1,2 padėtyje, kuri tada skaito mus iš php .
Dėl šios priežasties pavadinimas, pavyzdžiui, dviem skliausteliais nurodo, kad tai matrica.
Mes sukuriame failą, kuris įrašys duomenis į „mysql“ duomenų bazę, jis paims duomenis iš teksto laukelių ir tada, kai juos išsiųsime, perskaitysime masyvus ir pereisime prie for ciklo.

 MySQL (); // perskaitome išsiųstus duomenis ir saugome juos masyvuose $ name = $ _ POST ['pavadinimas']; $ area = $ _ POST ['area']; $ post = $ _ POST ['post']; $ email = $ _ POST ['email']; // einame ir įterpiame duomenis į „mysql“ lentelę, skirtą ($ i = 0; $ i užklausa ($ sql);}) // grįžtame prie pradinės puslapio antraštės („Vieta: index.php“);?> var13 - -> 

Kai paspausime išsaugojimo mygtuką, duomenys bus išsaugoti „Mysql“ duomenų bazėje ir grįšime į sąrašą. Turėkite omenyje, kad nėra patvirtinimų ir čia tik norima parodyti, kaip į lentelę įtraukti eilutes ir lengviau bei patogiau redaguoti informaciją dideliuose sąrašuose.

DIDELIS

Jei norime pasakyti vartotojui, ką įvesti į kiekvieną langelį, galime naudoti vietos rezervavimo ypatybę, norėdami parašyti komentarą teksto laukelyje. Šis komentaras išnyks, jei teksto laukelyje kažkas bus parašyta, ir jis nebus išsaugotas, jei nieko nebus parašyta, jis skirtas tik nurodyti vartotojui, kokio tipo duomenis rašyti, ar kitą nuorodą, padedančią įvedant duomenis.
Norėdami tai padaryti, mes pakeičiame scenarijų, kuris sukuria naują eilutę, prie kiekvieno teksto laukelio pridedame vietos rezervavimo ženklą ir atitinkamą komentarą ar nuorodą, kurią norime parodyti vartotojui.

 var eilutė = '
 '+ ''+ ''+ ''+ '

'; 

DIDELIS

Įterpdami naują eilutę, kiekviename teksto laukelyje matysime nuorodas. Be scenarijaus, skirto pridėti eilučių, galėtume įdiegti scenarijų, kuris patvirtintų duomenis iš kiekvieno teksto laukelio naudojant „jquery.validator“ papildinį. Kitame vadove vėliau pamatysime, kaip redaguoti duomenis ir ištrinti duomenis bei atitinkamą lentelės eilutę, skaitant duomenis iš langelio ID, kad būtų galima dinamiškai sukurti redagavimo ir ištrynimo veiksmus toje pačioje HTML lentelėje.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką