HTML -tabell legger til rader, kontroller og dynamiske data med Jquery, php og Mysql

Vi vil lage en liste over personell. Vi vil først opprette databasen til et antatt teknologiselskap som heter infotec og deretter Personal tabellen i mysql, vi kan bruke sql -koden fra phpmyadmin eller annen mysql -manager.

 LAG TABELL HVIS IKKE FINNES `personlig` (` id` int (11) IKKE NULL AUTO_INCREMENT, `navn` varchar (100) IKKE NULL,` område` varchar (100) IKKE NULL, `sett` varchar (100) IKKE NULL, `e -post` varchar (100) NOT NULL, PRIMARY KEY (` id`)) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; - - Vi setter inn noen data - SETT INN I `personlig` (` id`, `navn`,` område`, `posisjon`,` e -post`) VERDIER (1, 'Carlos Alonso', 'Informática', 'Developer', '[email protected]'), (2, 'Jose Garrido', 'Administration', 'Accountant', '[email protected]'), (3, 'Ana Junin', 'Informática', 'Design Graphic' , '[email protected]'); 

Her kan vi se hvordan tabellen ser ut når SQL -koden er kjørt.

FORSTØRRE

Deretter vil vi lage en enkel klasse i php for å manipulere mysql, denne klassen kan brukes på nytt i andre prosjekter. Vi oppretter filen config.php eller classDB., Php og legger til følgende kode.

tilkobling)) {$ this-> tilkobling = (mysql_connect ("localhost", "root", "")) eller die (mysql_error ()); mysql_select_db ("infotec", $ this-> tilkobling) eller die (mysql_error ()); }} forespørsel om offentlig funksjon ($ query) {$ result = mysql_query ($ query, $ this-> tilkobling); if (! $ result) {echo 'MySQL Error:'. mysql_error (); exit; } returner $ resultat; } offentlig funksjon få rader ($ query) {return mysql_fetch_array ($ query); } totalt antall offentlige funksjoner ($ query) {return mysql_num_rows ($ query); }}?> var13 ->

Nå vil vi lage hovedfilen til prosjektet som vil være index.php, om mulig en lokal server som Xampp, hvor vi vil spørre databasen og vise den personlige tabellen i en html -tabell.

 MySQL (); // Vi konsulterer den personlige tabellen $ query = $ db-> query ("SELECT * FROM personal"); ?> var13 ->
Menneskelige ressurser

 få rader ($ query)) {?> var13 -> 
 
 
ID
 
Navn
 
Område
 
Posisjon
 
E-post
 
Handlinger
 
 
 
 
 
 
 
 
 

 

Resultatet av php -koden som viser tabellen vil være følgende:

Vi vil deretter lage en stilarkfil som heter styles CSS å gi tabellen og radene noe design senere når du holder musen over dem.

Vi vil legge filen til hodet på nettsiden

Vi har klart å vise tabellen vi hadde i mysql ved hjelp av php og html. Nå skal vi lage et skript som ved hjelp av jquery lar oss legge til og lagre data dynamisk uten å omdirigere nettet og uten å åpne en annen skjerm, men gjøre det i den samme dataraden.
I koden under tabellen legger vi til en knapp for å påkalle jquery -funksjonen for å legge til nye rader.

Ny 

Etter knappen legger vi til jquery -skriptet som gjør det mulig å legge til rader

I skriptet må vi bruke navnene på html -elementene som en matrise i tilfelle vi trenger å legge til flere rader, så blir dataene lagret som en matrise, hver i en posisjon fra 0,1,2 som deretter leser oss fra php .
Av denne grunn angir navnet for eksempel med to parenteser at det er en matrise.
Vi lager filen som vil registrere dataene i mysql -databasen, den tar dataene fra tekstboksene, og når vi sender den, leser vi matrisene og går gjennom for -løkken.

 MySQL (); // vi leser de sendte dataene og lagrer dem i matriser $ name = $ _ POST ['name']; $ area = $ _ POST ['area']; $ post = $ _ POST ['post']; $ email = $ _ POST ['email']; // vi går gjennom og setter inn dataene i mysql -tabellen for ($ i = 0; $ i -spørring ($ sql);} // vi går tilbake til den opprinnelige sidehodet ('Location: index.php');?> var13 - -> 

Når vi trykker på lagre -knappen, blir dataene lagret i Mysql -databasen, og vi kommer tilbake til listen. Husk at det ikke er noen valideringer, og det er bare ment å vise hvordan du legger til rader i en tabell og lettere kan redigere informasjonen i store lister.

FORSTØRRE

Hvis vi vil fortelle brukeren hva han skal skrive inn i hver boks, kan vi bruke plassholderegenskapen til å skrive en kommentar i tekstboksen. Denne kommentaren vil forsvinne hvis noe er skrevet i tekstboksen, og den vil ikke bli lagret hvis ingenting er skrevet, den tjener bare til å indikere for brukeren hvilken type data som skal skrives eller annen indikasjon som hjelper dem når du legger inn data.
For å gjøre dette endrer vi skriptet som genererer den nye raden, vi legger til en plassholder i hver tekstboks og den tilhørende kommentaren eller indikasjonen som vi vil vise til brukeren.

 var rad = '
 '+ ''+ ''+ ''+ '

'; 

FORSTØRRE

Når du setter inn en ny rad, ser vi indikasjonene i hver tekstboks. I tillegg til skriptet for å legge til rader, kan vi implementere et skript for å validere data fra hver tekstboks med pluginet jquery.validator. I en annen opplæring ser vi senere hvordan du redigerer data og sletter data og den tilsvarende raden i tabellen ved å lese dataene fra celle -ID for dynamisk å lage redigerings- og slettingshandlingene i den samme HTML -tabellen.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng