Html-tabel rijen, besturingselementen en dynamische gegevens toevoegen met JQuery, php en Mysql

We maken een personeelslijst. We zullen eerst de database maken van een verondersteld technologiebedrijf genaamd infotec en vervolgens de persoonlijke tabel in mysql, we kunnen de sql-code van phpmyadmin of een andere mysql-manager gebruiken.

 MAAK TABEL INDIEN NIET BESTAAT `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) NIET NULL, PRIMAIRE SLEUTEL (` id`)) MOTOR = InnoDB STANDAARD CHARSET = latin1 AUTO_INCREMENT = 1; - - We voegen enkele gegevens in - INSERT INTO `personal` (` id`, `name`,` area`, `position`,` email`) WAARDEN (1, 'Carlos Alonso', 'Informática', 'Ontwikkelaar', ' calonso@info.com '), (2,' Jose Garrido ',' Administratie ',' Accountant ',' jgarrido@info.com '), (3,' Ana Junin ',' Informática ',' Grafisch ontwerp ' ,' ajunin@info.com '); 

Hier kunnen we zien hoe de tabel eruitziet zodra de SQL-code is uitgevoerd.

VERGROTEN

Vervolgens zullen we een eenvoudige klasse in php maken om mysql te manipuleren, deze klasse kan opnieuw worden gebruikt in andere projecten. We maken het bestand config.php of classDB., Php aan en voegen de volgende code toe.

verbinding)) {$ dit-> verbinding = (mysql_connect ("localhost", "root", "")) of die (mysql_error ()); mysql_select_db ("infotec", $ dit-> verbinding) of sterven (mysql_error ()); }} openbare functiequery ($ query) {$ resultaat = mysql_query ($ query, $ dit-> verbinding); if (! $ resultaat) {echo 'MySQL-fout:'. mysql_error (); Uitgang; } retourneer $ resultaat; } openbare functie krijg rijen ($ query) {return mysql_fetch_array ($ query); } openbare functie totale rijen ($ query) {return mysql_num_rows ($ query); }}?> var13 ->

Nu zullen we het hoofdbestand van het project maken dat index.php zal zijn, indien mogelijk een lokale server zoals Xampp, waar we de database zullen opvragen en de persoonlijke tabel in een html-tabel zullen tonen.

 MijnSQL (); // We raadplegen de persoonlijke tabel $ query = $ db-> query ("SELECT * FROM personal"); ?> var13 ->
Personeelszaken

 krijg rijen ($ query)) {?> var13 -> 
 
 
ID kaart
 
Naam
 
Gebied
 
Positie
 
E-mail
 
Acties
 
 
 
 
 
 
 
 
 

 

Het resultaat van de php-code die de tabel toont, is het volgende:

We zullen dan een stijlbladbestand maken met de naam stijlen CSS om de tabel en rijen later een ontwerp te geven als u er met de muis over gaat.

We zullen het bestand toevoegen aan de kop van de webpagina

We zijn erin geslaagd om de tabel die we hadden in mysql te tonen met behulp van php en html. Nu zullen we een script maken waarmee we door middel van jQuery gegevens dynamisch kunnen toevoegen en opslaan zonder het web om te leiden en zonder een ander scherm te openen, maar in dezelfde gegevensrij.
In de code onder de tabel voegen we een knop toe om de jQuery-functie aan te roepen om nieuwe rijen toe te voegen.

Nieuw 

Na de knop zullen we het jQuery-script toevoegen dat het mogelijk maakt om rijen toe te voegen

In het script moeten we de namen van de html-elementen als een matrix gebruiken voor het geval we meerdere rijen moeten toevoegen, dan worden de gegevens opgeslagen als een matrix, elk in een positie vanaf 0,1,2 die ons vervolgens leest van php .
Om deze reden geeft de naam bijvoorbeeld met twee haakjes aan dat het een matrix is.
We maken het bestand dat de gegevens in de mysql-database zal opnemen, het haalt de gegevens uit de tekstvakken en wanneer we het verzenden, lezen we de arrays en doorlopen we de for-lus.

 MijnSQL (); // we lezen de verzonden gegevens en slaan deze op in arrays $ naam = $ _ POST ['naam']; $ gebied = $ _ POST ['gebied']; $ bericht = $ _ POST ['post']; $ e-mail = $ _ POST ['e-mail']; // we gaan door en voegen de gegevens in de mysql-tabel in voor ($ i = 0; $ i query ($ sql);} // we keren terug naar de oorspronkelijke paginakop ('Locatie: index.php');?> var13 - -> 

Wanneer we op de knop Opslaan drukken, worden de gegevens opgeslagen in de Mysql-database en keren we terug naar de lijst. Houd er rekening mee dat er geen validaties zijn en het is alleen bedoeld om hier te laten zien hoe u rijen aan een tabel toevoegt en om de informatie in grote lijsten gemakkelijker en comfortabeler te kunnen bewerken.

VERGROTEN

Als we de gebruiker willen vertellen wat hij in elk vak moet invoeren, kunnen we de eigenschap placeholder gebruiken om een ​​opmerking in het tekstvak te schrijven. Deze opmerking verdwijnt als er iets in het tekstvak wordt geschreven en wordt niet opgeslagen als er niets wordt geschreven, het dient alleen om de gebruiker aan te geven welk type gegevens hij moet schrijven of een andere indicatie die hem helpt bij het invoeren van gegevens.
Om dit te doen, wijzigen we het script dat de nieuwe rij genereert, voegen we een tijdelijke aanduiding toe aan elk tekstvak en de bijbehorende opmerking of indicatie die we aan de gebruiker willen tonen.

 var rij = '
 '+ ''+ ''+ ''+ '

'; 

VERGROTEN

Bij het invoegen van een nieuwe rij zullen we de aanduidingen in elk tekstvak zien. Naast het script om rijen toe te voegen, kunnen we een script implementeren om gegevens uit elk tekstvak te valideren met de jquery.validator-plug-in. In een andere zelfstudie zullen we later zien hoe u gegevens kunt bewerken en gegevens en de bijbehorende rij van de tabel kunt verwijderen door de gegevens van cel-ID te lezen om dynamisch de bewerkings- en verwijderingsacties in dezelfde HTML-tabel te maken.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven