HTML -tabell lägger till rader, kontroller och dynamiska data med Jquery, php och Mysql

Vi kommer att göra en personallista. Vi kommer först att skapa databasen för ett förmodat teknikföretag som heter infotec och sedan Personlig tabell i mysql, vi kan använda sql -koden från phpmyadmin eller någon annan mysql -chef.

 SKAPA TABELL OM DET INTE FUNGERAR `person` (` 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; - - Vi infogar en del data - SKRIV IN I 'personlig' ('id', 'namn', 'område', 'position', 'e -post') VÄRDEN (1, 'Carlos Alonso', 'Informática', 'Developer', '[email protected]'), (2, 'Jose Garrido', 'Administration', 'Accountant', '[email protected]'), (3, 'Ana Junin', 'Informática', 'Design Graphic' , '[email protected]'); 

Här kan vi se hur tabellen ser ut när SQL -koden har körts.

FÖRSTORA

Därefter kommer vi att skapa en enkel klass i php för att manipulera mysql, den här klassen kan återanvändas i andra projekt. Vi skapar filen config.php eller classDB., Php och lägger till följande kod.

anslutning)) {$ this-> anslutning = (mysql_connect ("localhost", "root", "")) eller die (mysql_error ()); mysql_select_db ("infotec", $ this-> anslutning) eller die (mysql_error ()); }} fråga om offentlig funktion ($ query) {$ result = mysql_query ($ query, $ this-> connection); if (! $ result) {echo 'MySQL Error:'. mysql_error (); utgång; } returnera $ resultat; } public function get rows ($ query) {return mysql_fetch_array ($ query); } totala rader för allmänna funktioner ($ fråga) {return mysql_num_rows ($ query); }}?> var13 ->

Nu kommer vi att skapa huvudfilen för projektet som kommer att vara index.php, om möjligt en lokal server som Xampp, där vi kommer att fråga databasen och visa den personliga tabellen i en html -tabell.

 MySQL (); // Vi konsulterar den personliga tabellen $ query = $ db-> query ("SELECT * FROM personal"); ?> var13 ->
Personalavdelning

 få rader ($ fråga)) {?> var13 -> 
 
 
ID
 
namn
 
Område
 
Placera
 
E-post
 
Åtgärder
 
 
 
 
 
 
 
 
 

 

Resultatet av php -koden som visar tabellen blir följande:

Vi kommer sedan att skapa en formatmallfil som heter styles CSS för att ge tabellen och raderna lite design senare när du håller muspekaren över dem.

Vi lägger till filen på webbsidans huvud

Vi har lyckats visa tabellen vi hade i mysql med hjälp av php och html. Nu kommer vi att skapa ett skript som med hjälp av jquery låter oss lägga till och spara data dynamiskt utan att omdirigera webben och utan att öppna en annan skärm, men göra det i samma datarad.
I koden nedanför tabellen lägger vi till en knapp för att åberopa jquery -funktionen för att lägga till nya rader.

Ny 

Efter knappen lägger vi till jquery -skriptet som gör det möjligt att lägga till rader

I skriptet måste vi använda namnen på html -elementen som en matris om vi behöver lägga till flera rader så sparas data som en matris, var och en i en position från 0,1,2 som sedan läser oss från php .
Av denna anledning, namnet, till exempel, indikerar med två parenteser att det är en matris.
Vi skapar filen som registrerar data i mysql -databasen, den tar data från textrutorna och sedan när vi skickar den läser vi matriserna och vi går igenom for -loop.

 MySQL (); // vi läser den skickade datan och lagrar den i matriser $ name = $ _ POST ['name']; $ area = $ _ POST ['area']; $ post = $ _ POST ['post']; $ email = $ _ POST ['email']; // vi går igenom och sätter in data i mysql -tabellen för ($ i = 0; $ i -fråga ($ sql);} // vi återgår till den ursprungliga sidhuvudet ('Location: index.php');?> var13 - -> 

När vi trycker på knappen Spara sparas data i Mysql -databasen och vi återgår till listan. Tänk på att det inte finns några valideringar och det är bara avsett att visa här hur man lägger till rader i en tabell och att kunna redigera informationen i stora listor enklare och mer bekvämt.

FÖRSTORA

Om vi ​​vill berätta för användaren vad han ska ange i varje ruta kan vi använda platshållaregenskapen för att skriva en kommentar i textrutan. Den här kommentaren försvinner om något är skrivet i textrutan och den kommer inte att sparas om ingenting skrivs, det tjänar bara till att indikera för användaren vilken typ av data som ska skrivas eller någon annan indikation som hjälper dem vid inmatning av data.
För att göra detta ändrar vi skriptet som genererar den nya raden, vi lägger till en platshållare i varje textruta och motsvarande kommentar eller indikation som vi vill visa för användaren.

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

'; 

FÖRSTORA

När du sätter in en ny rad ser vi indikationerna i varje textruta. Förutom skriptet för att lägga till rader kan vi implementera ett skript för att validera data från varje textruta med jquery.validator -plugin. I en annan handledning ser vi senare hur man redigerar data och tar bort data och motsvarande rad i tabellen genom att läsa data från cell -id för att dynamiskt skapa redigerings- och raderingsåtgärder i samma HTML -tabell.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng