La tabella HTML aggiunge righe, controlli e dati dinamici con Jquery, php e Mysql

Faremo un elenco del personale. Creeremo prima il database di una presunta azienda tecnologica chiamata infotec e poi la tabella personale in mysql, possiamo usare il codice sql da phpmyadmin o qualsiasi altro gestore 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; - - Inseriamo alcuni dati - INSERT INTO `personal` (`id`, `name`,` area`, `position`,` email`) VALUES (1, 'Carlos Alonso', 'Informática', 'Developer', ' [email protected] '), (2,' Jose Garrido ', 'Amministrazione ', 'Ragioniere ',' [email protected] '), (3,' Ana Junin ', 'Informatica ', 'Grafica grafica ' ,' [email protected] '); 

Qui possiamo vedere come appare la tabella una volta eseguito il codice SQL.

INGRANDIRE

Successivamente creeremo una semplice classe in php per manipolare mysql, questa classe può essere riutilizzata in altri progetti. Creiamo il file config.php o classDB., Php e aggiungiamo il seguente codice.

connection)) {$ this-> connection = (mysql_connect ("localhost", "root", "")) or die (mysql_error ()); mysql_select_db ("infotec", $ this-> connection) o die (mysql_error ()); }} query di funzione pubblica ($ query) {$ risultato = mysql_query ($ query, $ this-> connection); if (! $ risultato) {echo 'Errore MySQL:'. mysql_error (); Uscita; } restituisce $ risultato; } funzione pubblica ottiene righe ($ query) {return mysql_fetch_array ($ query); } public function totale righe ($ query) {return mysql_num_rows ($ query); }}?> var13 ->

Ora creeremo il file principale del progetto che sarà index.php, se possibile un server locale come Xampp, dove interrogheremo il database e mostreremo la tabella personale in una tabella html.

 MySQL (); // Consultiamo la tabella personale $ query = $ db-> query ("SELECT * FROM personal"); ?> var13 ->
Risorse umane

 ottenere righe ($ query)) {?> var13 -> 
 
 
ID
 
Nome
 
La zona
 
Posizione
 
E-mail
 
Azioni
 
 
 
 
 
 
 
 
 

 

Il risultato del codice php che mostra la tabella sarà il seguente:

Creeremo quindi un file di fogli di stile chiamato stili CSS per dare alla tabella e alle righe un po' di design in seguito quando ci si passa sopra con il mouse.

Aggiungeremo il file all'inizio della pagina web

Siamo riusciti a mostrare la tabella che avevamo in mysql usando php e html. Ora creeremo uno script che tramite jquery ci permette di aggiungere e salvare dati in modo dinamico senza reindirizzare il web e senza aprire un'altra schermata, ma facendolo nella stessa riga di dati.
Nel codice sotto la tabella aggiungiamo un pulsante per invocare la funzione jquery per aggiungere nuove righe.

Nuovo 

Dopo il pulsante aggiungeremo lo script jquery che consentirà di aggiungere righe

Nello script dobbiamo usare i nomi degli elementi html come matrice nel caso necessitiamo aggiungere più righe allora i dati verranno salvati come matrice, ognuno in una posizione da 0,1,2 che poi ci leggerà da php .
Per questo motivo il nome, ad esempio, indica con due parentesi che si tratta di una matrice.
Creiamo il file che registrerà i dati nel database mysql, prende i dati dalle caselle di testo e poi quando lo inviamo, leggiamo gli array e passiamo attraverso il ciclo for.

 MySQL (); // leggiamo i dati inviati e li memorizziamo negli array $ name = $ _ POST ['name']; $ area = $ _ POST ['area']; $ post = $ _ POST ['post']; $ email = $ _ POST ['email']; // esaminiamo e inseriamo i dati nella tabella mysql for ($ i = 0; $ i query ($ sql);} // torniamo all'intestazione della pagina iniziale ('Location: index.php');?> var13 - -> 

Quando premiamo il pulsante salva, i dati verranno salvati nel database Mysql e torneremo alla lista. Tieni presente che non ci sono convalide e si intende solo mostrare qui come aggiungere righe a una tabella e poter modificare le informazioni in elenchi di grandi dimensioni in modo più semplice e comodo.

INGRANDIRE

Se vogliamo dire all'utente cosa inserire in ogni casella, possiamo usare la proprietà segnaposto per scrivere un commento nella casella di testo. Questo commento scompare se viene scritto qualcosa nella casella di testo e non verrà salvato se non viene scritto nulla, serve solo ad indicare all'utente che tipo di dati scrivere o qualche altra indicazione che lo aiuti nell'inserimento dei dati.
Per fare ciò, cambiamo lo script che genera la nuova riga, aggiungiamo un segnaposto a ciascuna casella di testo e il commento o indicazione corrispondente che vogliamo mostrare all'utente.

 var riga = '
 '+ ''+ ''+ ''+ '

'; 

INGRANDIRE

Quando si inserisce una nuova riga vedremo le indicazioni in ogni casella di testo. Oltre allo script per aggiungere righe, potremmo implementare uno script per convalidare i dati da ciascuna casella di testo con il plug-in jquery.validator. In un altro tutorial vedremo in seguito come modificare i dati ed eliminare i dati e la riga corrispondente della tabella leggendo i dati dall'id cella per creare dinamicamente le azioni di modifica e cancellazione nella stessa tabella HTML.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo