✅ Html tabulka přidává řádky, ovládací prvky a dynamická data pomocí Jquery, php a Mysql

Obsah

Lidské zdroje

Vytvoříme seznam zaměstnanců. Nejprve vytvoříme databázi údajné technologické společnosti s názvem infotec a poté osobní tabulku v mysql, můžeme použít sql kód z phpmyadminu nebo jiného mysql manažera.

 VYTVOŘIT TABULKU, KDYŽ NEEXISTUJE `osobní` (` 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`)) MOTOR = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; - - Vkládáme nějaká data - VLOŽIT DO `osobní` (` id`, `jméno`,` oblast`, `pozice`,` email`) HODNOTY (1, 'Carlos Alonso', 'Informática', 'Developer', '[email protected]'), (2, 'Jose Garrido', 'Administration', 'Accountant', '[email protected]'), (3, 'Ana Junin', 'Informática', 'Design Graphic' , '[email protected]');

Zde vidíme, jak tabulka vypadá po spuštění kódu SQL.

ZVĚTŠIT

Dále vytvoříme jednoduchou třídu v php pro manipulaci s mysql, tuto třídu lze znovu použít v jiných projektech. Vytvoříme soubor config.php nebo classDB., Php a přidáme následující kód.

připojení)) {$ this-> connection = (mysql_connect ("localhost", "root", ""))) nebo die (mysql_error ()); mysql_select_db ("infotec", $ this-> připojení) nebo die (mysql_error ()); }} veřejný dotaz ($ query) {$ result = mysql_query ($ query, $ this-> připojení); if (! $ result) {echo 'MySQL Error:'. mysql_error (); výstup; } vrátit $ výsledek; } veřejná funkce získat řádky ($ dotaz) {návrat mysql_fetch_array ($ dotaz); } veřejné funkce celkem řádků ($ dotaz) {return mysql_num_rows ($ dotaz); }}?> var13 ->

Nyní vytvoříme hlavní soubor projektu, který bude index.php, pokud možno místní server jako Xampp, kde budeme dotazovat databázi a zobrazovat osobní tabulku v html tabulce.

 MySQL (); // Konzultujeme osobní tabulku $ query = $ db-> query ("SELECT * FROM personal"); ?> var13 ->
Lidské zdroje

 získat řádky ($ query)) {?> var13 -> 
 
 ID  název  Plocha  Pozice  E-mailem  Akce

Výsledek kódu php, který ukazuje tabulku, bude následující:

Poté vytvoříme soubor šablon stylů nazvaný styly CSS dát tabulce a řádkům nějaký design později, když na ně najedete myší.

Soubor přidáme do záhlaví webové stránky

Podařilo se nám ukázat tabulku, kterou jsme měli v mysql, pomocí php a html. Nyní vytvoříme skript, který nám pomocí jquery umožní dynamicky přidávat a ukládat data bez přesměrování webu a bez otevření další obrazovky, ale ve stejném řádku dat.
V kódu pod tabulkou přidáme tlačítko pro vyvolání funkce jquery pro přidání nových řádků.

Nový

Za tlačítko přidáme skript jquery, který umožní přidávat řádky

Ve skriptu musíme použít názvy prvků html jako matici v případě, že potřebujeme přidat několik řádků, pak budou data uložena jako matice, každá na pozici od 0,1,2, která nás poté načte z php .
Z tohoto důvodu název například se dvěma závorkami označuje, že se jedná o matici.
Vytvoříme soubor, který bude zaznamenávat data do databáze mysql, vezme data z textových polí a poté, když je odešleme, čteme pole a procházíme smyčkou for.

 MySQL (); // přečteme odeslaná data a uložíme je do polí $ name = $ _ POST ['name']; $ area = $ _ POST ['area']; $ post = $ _ POST ['příspěvek']; $ email = $ _ POST ['email']; // projdeme a vložíme data do tabulky mysql pro ($ i = 0; $ i dotaz ($ sql);} // vrátíme se na úvodní záhlaví stránky ('Umístění: index.php');?> var13 - ->

Když stiskneme tlačítko Uložit, data se uloží do databáze Mysql a vrátíme se do seznamu. Mějte na paměti, že neexistují žádná ověření a má zde pouze ukázat, jak přidat řádky do tabulky a jak snadněji a pohodlněji upravovat informace ve velkých seznamech.

ZVĚTŠIT

Pokud chceme uživateli sdělit, co má zadat do každého pole, můžeme použít vlastnost zástupného symbolu k napsání komentáře do textového pole. Tento komentář zmizí, pokud je do textového pole něco zapsáno, a neuloží se, pokud není nic napsáno, slouží pouze k označení uživateli, jaký typ dat má zapsat, nebo nějaký jiný údaj, který mu pomáhá při zadávání dat.
Za tímto účelem změníme skript, který generuje nový řádek, do každého textového pole přidáme zástupný symbol a odpovídající komentář nebo označení, které chceme uživateli zobrazit.

 var řádek = '
 '+ ''+ ''+ ''+ '

';

ZVĚTŠIT

Při vkládání nového řádku uvidíme indikace v každém textovém poli. Kromě skriptu pro přidání řádků bychom mohli implementovat skript pro ověření dat z každého textového pole pomocí pluginu jquery.validator. V dalším tutoriálu se později podíváme na to, jak upravovat data a odstraňovat data a odpovídající řádek tabulky čtením dat z id buňky a dynamicky vytvářet akce úprav a mazání ve stejné tabulce HTML.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod