Html-Tabelle fügt Zeilen, Steuerelemente und dynamische Daten mit Jquery, PHP und Mysql hinzu

Inhaltsverzeichnis
Wir erstellen eine Personalliste. Wir erstellen zuerst die Datenbank eines angeblichen Technologieunternehmens namens infotec und dann die Personal-Tabelle in mysql, wir können den SQL-Code von phpmyadmin oder einem anderen MySQL-Manager verwenden.
 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; - - Wir fügen einige Daten ein - INSERT IN `personal` (` id`, `name`,` area`, `position`,` email`) VALUES (1, 'Carlos Alonso', 'Informática', 'Developer ', ' [email protected] '), (2,' Jose Garrido ',' Verwaltung ',' Buchhalter ',' [email protected] '), (3,' Ana Junin ',' Informática ',' Design Graphic ' ,' [email protected] '); 

Hier sehen wir, wie die Tabelle nach der Ausführung des SQL-Codes aussieht.

VERGRÖSSERN

Als nächstes werden wir eine einfache Klasse in PHP erstellen, um mysql zu manipulieren, diese Klasse kann in anderen Projekten wiederverwendet werden. Wir erstellen die Datei config.php oder classDB., PHP und fügen folgenden Code hinzu.
connection)) {$ this-> connection = (mysql_connect ("localhost", "root", "")) or die (mysql_error ()); mysql_select_db ("infotec", $ this-> connection) oder die (mysql_error ()); }} public function query ($ query) {$ result = mysql_query ($ query, $ this-> connection); if (! $ result) {echo 'MySQL-Fehler:'. MySQL-Fehler (); Ausfahrt; } $ Ergebnis zurückgeben; } öffentliche Funktion Zeilen abrufen ($-Abfrage) {return mysql_fetch_array ($-Abfrage); } öffentliche Funktion Gesamtzeilen ($-Abfrage) {return mysql_num_rows ($-Abfrage); }}?> var13 ->

Jetzt erstellen wir die Hauptdatei des Projekts, die index.php ist, wenn möglich einen lokalen Server wie Xampp, wo wir die Datenbank abfragen und die persönliche Tabelle in einer HTML-Tabelle anzeigen.
 MySQL(); // Wir konsultieren die persönliche Tabelle $ query = $ db-> query ("SELECT * FROM personal"); ?> var13 ->

Humanressourcen

Zeilen abrufen ($-Abfrage)) {?> var13 ->
ICH WÜRDE Name Bereich Position Email Aktionen


Das Ergebnis des PHP-Codes, der die Tabelle anzeigt, sieht wie folgt aus:

Wir erstellen dann eine Stylesheet-Datei namens Styles CSS um der Tabelle und den Zeilen später etwas Design zu geben, wenn Sie mit der Maus darüber fahren.
 

Wir werden die Datei zum Kopf der Webseite hinzufügen

Wir haben es geschafft, die Tabelle, die wir in mysql hatten, mit php und html anzuzeigen. Jetzt erstellen wir ein Skript, das es uns mithilfe von jquery ermöglicht, Daten dynamisch hinzuzufügen und zu speichern, ohne das Web umzuleiten und ohne einen anderen Bildschirm zu öffnen, sondern in derselben Datenzeile.
Im Code unter der Tabelle fügen wir eine Schaltfläche zum Aufrufen der jquery-Funktion hinzu, um neue Zeilen hinzuzufügen.
Neu 

Nach der Schaltfläche fügen wir das jquery-Skript hinzu, das es ermöglicht, Zeilen hinzuzufügen
 

Im Skript müssen wir die Namen der HTML-Elemente als Matrix verwenden, falls wir mehrere Zeilen hinzufügen müssen, dann werden die Daten als Matrix gespeichert, jede an einer Position von 0,1,2, die uns dann aus PHP ausliest .
Aus diesem Grund weist der Name beispielsweise mit zwei Klammern darauf hin, dass es sich um eine Matrix handelt.
Wir erstellen die Datei, die die Daten in der MySQL-Datenbank aufzeichnet, sie nimmt die Daten aus den Textfeldern und dann, wenn wir sie senden, lesen wir die Arrays und durchlaufen die for-Schleife.
 MySQL(); // wir lesen die gesendeten Daten und speichern sie in Arrays $ name = $ _ POST ['name']; $ Bereich = $ _ POST ['Bereich']; $ post = $ _ POST ['post']; $ email = $ _ POST ['email']; // wir gehen durch und fügen die Daten in die mysql-Tabelle für ($ i = 0; $ i query ($ sql);} // wir kehren zum ursprünglichen Seitenkopf zurück ('Location: index.php');?> var13 - -> 

Wenn wir den Speichern-Button drücken, werden die Daten in der Mysql-Datenbank gespeichert und wir kehren zur Liste zurück. Beachten Sie, dass es keine Validierungen gibt und hier nur gezeigt werden soll, wie man Zeilen zu einer Tabelle hinzufügt und die Informationen in großen Listen einfacher und komfortabler bearbeiten kann.

VERGRÖSSERN

Wenn wir dem Benutzer sagen möchten, was er in jedes Feld eingeben soll, können wir die Platzhaltereigenschaft verwenden, um einen Kommentar in das Textfeld zu schreiben. Dieser Kommentar verschwindet, wenn etwas in das Textfeld geschrieben wird, und er wird nicht gespeichert, wenn nichts geschrieben wird.
Dazu ändern wir das Skript, das die neue Zeile generiert, fügen jedem Textfeld einen Platzhalter und den entsprechenden Kommentar oder Hinweis hinzu, den wir dem Benutzer anzeigen möchten.
 var Zeile = '
 '+ ''+ ''+ ''+ '

'; 

VERGRÖSSERN

Beim Einfügen einer neuen Zeile sehen wir die Angaben in jedem Textfeld. Zusätzlich zum Skript zum Hinzufügen von Zeilen könnten wir mit dem jquery.validator-Plugin ein Skript implementieren, um Daten aus jedem Textfeld zu validieren. In einem anderen Tutorial werden wir später sehen, wie Sie Daten bearbeiten und Daten und die entsprechende Zeile der Tabelle löschen, indem Sie die Daten aus der Zellen-ID lesen, um die Bearbeitungs- und Löschaktionen in derselben HTML-Tabelle dynamisch zu erstellen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben

Sie werden die Entwicklung der Website helfen, die Seite mit Ihren Freunden teilen

wave wave wave wave wave