La table HTML ajoute des lignes, des contrôles et des données dynamiques avec Jquery, php et Mysql

Nous ferons une liste du personnel. Nous allons d'abord créer la base de données d'une société de technologie supposée appelée infotec puis la table personnelle dans mysql, nous pouvons utiliser le code sql de phpmyadmin ou de tout autre gestionnaire mysql.

 CREATE TABLE IF NOT EXISTS `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, PRIMARY KEY (` id`)) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; - - Nous insérons des données - INSÉRER DANS `personnel` (` id`, `nom`,` zone`, `position`,` email`) VALEURS (1, 'Carlos Alonso', 'Informática', 'Développeur ', ' [email protected] '), (2, ' Jose Garrido ', ' Administration ', ' Comptable ', ' [email protected] '), (3, ' Ana Junin ', ' Informática ', ' Design Graphic ' ,' [email protected] '); 

Ici, nous pouvons voir à quoi ressemble la table une fois le code SQL exécuté.

AGRANDIR

Ensuite, nous allons créer une classe simple en php pour manipuler mysql, cette classe peut être réutilisée dans d'autres projets. Nous créons le fichier config.php ou classDB., Php et ajoutons le code suivant.

connection)) {$ this-> connection = (mysql_connect ("localhost", "root", "")) ou die (mysql_error ()); mysql_select_db ("infotec", $ this-> connection) ou die (mysql_error ()); }} requête de fonction publique ($ query) {$ result = mysql_query ($ query, $ this-> connection); if (! $ result) {écho 'MySQL Error:'. mysql_error (); sortir; } renvoie $ résultat; } fonction publique obtenir des lignes (requête $) {return mysql_fetch_array (requête $); } nombre total de lignes de la fonction publique (requête $) {return mysql_num_rows (requête $); }} ?> var13 ->

Nous allons maintenant créer le fichier principal du projet qui sera index.php, si possible un serveur local comme Xampp, où nous interrogerons la base de données et afficherons la table personnelle dans une table html.

 MySQL (); // On consulte la table personnelle $ query = $ db-> query (" SELECT * FROM personal "); ?> var13 ->
Ressources humaines

 obtenir des lignes (requête $)) {?> var13 -> 
 
 
identifiant
 
nom
 
Surface
 
Position
 
E-mail
 
Actions
 
 
 
 
 
 
 
 
 

 

Le résultat du code php qui affiche le tableau sera le suivant :

Nous allons ensuite créer un fichier de feuilles de style appelé styles CSS pour donner à la table et aux rangées une certaine conception plus tard lorsque la souris les survole.

Nous allons ajouter le fichier à la tête de la page Web

Nous avons réussi à afficher la table que nous avions dans mysql en utilisant php et html. Nous allons maintenant créer un script qui, au moyen de jquery, nous permet d'ajouter et d'enregistrer des données de manière dynamique sans rediriger le Web et sans ouvrir un autre écran, mais en le faisant dans la même ligne de données.
Dans le code sous le tableau, nous ajoutons un bouton pour appeler la fonction jquery afin d'ajouter de nouvelles lignes.

Nouvelle 

Après le bouton nous ajouterons le script jquery qui permettra d'ajouter des lignes

Dans le script, nous devons utiliser les noms des éléments html comme matrice au cas où nous aurions besoin d'ajouter plusieurs lignes, puis les données seront enregistrées sous forme de matrice, chacune dans une position de 0,1,2 qui nous lira ensuite à partir de php .
Pour cette raison, le nom, par exemple, indiquant avec deux parenthèses qu'il s'agit d'une matrice.
On crée le fichier qui va enregistrer les données dans la base de données mysql, il prend les données des zones de texte puis quand on l'envoie, on lit les tableaux et on parcourt la boucle for.

 MySQL (); // nous lisons les données envoyées et les stockons dans des tableaux $ name = $ _ POST ['name']; $ zone = $ _ POST ['zone']; $ poste = $ _ POST ['post']; $ email = $ _ POST ['email']; // nous parcourons et insérons les données dans la table mysql pour ($ i = 0; $ i query ($ sql);} // nous revenons à l'en-tête de page initial ('Location: index.php');?> var13 - -> 

Lorsque nous appuyons sur le bouton Enregistrer, les données seront enregistrées dans la base de données Mysql et nous reviendrons à la liste. Gardez à l'esprit qu'il n'y a pas de validations et qu'il est uniquement destiné à montrer ici comment ajouter des lignes à un tableau et pouvoir modifier les informations dans de grandes listes plus facilement et plus confortablement.

AGRANDIR

Si nous voulons dire à l'utilisateur ce qu'il doit saisir dans chaque zone, nous pouvons utiliser la propriété placeholder pour écrire un commentaire dans la zone de texte. Ce commentaire disparaîtra si quelque chose est écrit dans la zone de texte et il ne sera pas enregistré si rien n'est écrit, il sert uniquement à indiquer à l'utilisateur quel type de données écrire ou une autre indication qui l'aide lors de la saisie des données.
Pour ce faire, nous modifions le script qui génère la nouvelle ligne, nous ajoutons un espace réservé à chaque zone de texte et le commentaire ou l'indication correspondant que nous voulons montrer à l'utilisateur.

 var ligne = '
 '+ ''+ ''+ ''+ '

'; 

AGRANDIR

Lors de l'insertion d'une nouvelle ligne, nous verrons les indications dans chaque zone de texte. En plus du script pour ajouter des lignes, nous pourrions implémenter un script pour valider les données de chaque zone de texte avec le plugin jquery.validator. Dans un autre tutoriel, nous verrons plus tard comment modifier les données et supprimer les données et la ligne correspondante du tableau en lisant les données de l'identifiant de la cellule pour créer dynamiquement les actions d'édition et de suppression dans le même tableau HTML.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif