Html -tabel tilføj rækker, kontroller og dynamiske data med Jquery, php og Mysql

Vi vil lave en liste over personale. Vi vil først oprette databasen for et formodet teknologivirksomhed kaldet infotec og derefter den personlige tabel i mysql, vi kan bruge sql -koden fra phpmyadmin eller enhver anden mysql -manager.

 Opret tabel, hvis den ikke findes 'personlig' ('id' int (11) IKKE NULL AUTO_INCREMENT, 'navn' varchar (100) IKKE NULL, 'område' varchar (100) IKKE NULL, 'sæt' varchar (100) IKKE NULL, `email` varchar (100) IKKE NULL, PRIMÆR NØGLE (` id`)) MOTOR = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; - - Vi indsætter nogle data - INSERT INTO `personal '(` id`, `name`,` area`, `position`,` email`) VÆRDIER (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 ud, når SQL -koden er udført.

FORSTØRRE

Dernæst vil vi oprette en simpel klasse i php for at manipulere mysql, denne klasse kan genbruges i andre projekter. Vi opretter filen config.php eller classDB., Php og tilføjer følgende kode.

forbindelse)) {$ this-> forbindelse = (mysql_connect ("localhost", "root", ""))) eller die (mysql_error ()); mysql_select_db ("infotec", $ this-> forbindelse) eller die (mysql_error ()); }} forespørgsel om offentlig funktion ($ forespørgsel) {$ result = mysql_query ($ forespørgsel, $ dette-> forbindelse); if (! $ result) {echo 'MySQL Error:'. mysql_error (); Afslut; } returnere $ resultat; } offentlig funktion få rækker ($ forespørgsel) {return mysql_fetch_array ($ forespørgsel); } samlede funktioner i den offentlige funktion ($ forespørgsel) {return mysql_num_rows ($ forespørgsel); }}?> var13 ->

Nu vil vi oprette projektets hovedfil, der vil være index.php, om muligt en lokal server som Xampp, hvor vi vil forespørge databasen og vise den personlige tabel i en html -tabel.

 MySQL (); // Vi konsulterer den personlige tabel $ forespørgsel = $ db-> forespørgsel ("VÆLG * FRA personlig"); ?> var13 ->
Menneskelige ressourcer

 få rækker ($ forespørgsel)) {?> var13 -> 
 
 
ID
 
Navn
 
Areal
 
Position
 
E-mail
 
Handlinger
 
 
 
 
 
 
 
 
 

 

Resultatet af php -koden, der viser tabellen, bliver følgende:

Vi vil derefter oprette en stilarkfil kaldet styles CSS for at give tabellen og rækker noget design senere, når du holder musen over dem.

Vi tilføjer filen til hovedet på websiden

Vi har formået at vise tabellen, vi havde i mysql ved hjælp af php og html. Nu vil vi oprette et script, der ved hjælp af jquery giver os mulighed for at tilføje og gemme data dynamisk uden at omdirigere internettet og uden at åbne en anden skærm, men gøre det i den samme datarække.
I koden under tabellen tilføjer vi en knap til at påberåbe jquery -funktionen for at tilføje nye rækker.

Ny 

Efter knappen tilføjer vi jquery -scriptet, der gør det muligt at tilføje rækker

I scriptet skal vi bruge navnene på html -elementerne som en matrix, hvis vi skal tilføje flere rækker, så gemmes dataene som en matrix, hver i en position fra 0,1,2, der derefter læser os fra php .
Af denne grund angiver navnet f.eks. Med to parenteser, at det er en matrix.
Vi opretter den fil, der vil registrere dataene i mysql -databasen, den tager dataene fra tekstfelterne, og når vi sender den, læser vi arrays, og vi går gennem for -loop.

 MySQL (); // vi læser de sendte data og gemmer dem i arrays $ name = $ _ POST ['navn']; $ område = $ _ POST ['område']; $ post = $ _ POST ['post']; $ email = $ _ POST ['email']; // vi går igennem og indsætter dataene i mysql -tabellen for ($ i = 0; $ i forespørgsel ($ sql);} // vi vender tilbage til det oprindelige sidehoved ('Location: index.php');?> var13 - -> 

Når vi trykker på knappen Gem, gemmes dataene i Mysql -databasen, og vi vender tilbage til listen. Husk, at der ikke er nogen valideringer, og det er kun beregnet til her at vise, hvordan du tilføjer rækker til en tabel og lettere kan redigere oplysningerne i store lister.

FORSTØRRE

Hvis vi vil fortælle brugeren, hvad han skal indtaste i hver boks, kan vi bruge egenskaben pladsholder til at skrive en kommentar i tekstfeltet. Denne kommentar vil forsvinde, hvis der er skrevet noget i tekstboksen, og den vil ikke blive gemt, hvis der ikke er skrevet noget, den tjener kun til at angive brugeren, hvilken type data der skal skrives eller en anden indikation, der hjælper dem, når de indtaster data.
For at gøre dette ændrer vi det script, der genererer den nye række, vi tilføjer en pladsholder til hver tekstboks og den tilhørende kommentar eller indikation, som vi vil vise for brugeren.

 var række = '
 '+ ''+ ''+ ''+ '

'; 

FORSTØRRE

Når du indsætter en ny række, ser vi indikationerne i hvert tekstfelt. Ud over scriptet til tilføjelse af rækker, kunne vi implementere et script til at validere data fra hver tekstboks med jquery.validator -pluginet. I en anden vejledning ser vi senere, hvordan man redigerer data og sletter data og den tilsvarende række i tabellen ved at læse data fra celle -id for dynamisk at oprette redigerings- og sletningshandlingerne i den samme HTML -tabel.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt