✅ A tabela HTML adiciona linhas, controles e dados dinâmicos com Jquery, php e Mysql

Índice

Recursos humanos

Faremos uma lista de pessoal. Vamos primeiro criar o banco de dados de uma suposta empresa de tecnologia chamada infotec e depois a tabela Pessoal no mysql, podemos usar o código sql do phpmyadmin ou qualquer outro gerenciador do mysql.

 CRIAR TABELA SE NÃO EXISTIR `pessoal` (` 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) NÃO NULO, CHAVE PRIMÁRIA (` id`)) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; - - Inserimos alguns dados - INSERT INTO `pessoal` (` id`, `nome`,` área`, `posição`,` email`) VALORES (1, 'Carlos Alonso', 'Informática', 'Desenvolvedor', '[email protected]'), (2, 'Jose Garrido', 'Administração', 'Contador', '[email protected]'), (3, 'Ana Junin', 'Informática', 'Design Gráfico' , '[email protected]');

Aqui podemos ver como fica a tabela depois que o código SQL é executado.

PROLONGAR

A seguir iremos criar uma classe simples em php para manipular o mysql, esta classe pode ser reutilizada em outros projetos. Criamos o arquivo config.php ou classDB., Php e adicionamos o seguinte código.

conexão)) {$ this-> conexão = (mysql_connect ("localhost", "root", "")) ou die (mysql_error ()); mysql_select_db ("infotec", $ this-> conexão) ou die (mysql_error ()); }} consulta de função pública ($ query) {$ result = mysql_query ($ query, $ this-> connection); if (! $ result) {echo 'Erro MySQL:'. mysql_error (); saída; } return $ result; } função pública obtém linhas ($ query) {return mysql_fetch_array ($ query); } total de linhas de função pública ($ query) {return mysql_num_rows ($ query); }}?> var13 ->

Agora vamos criar o arquivo principal do projeto que será index.php, se possível um servidor local como o Xampp, onde consultaremos o banco de dados e mostraremos a tabela pessoal em uma tabela html.

 MySQL (); // Consultamos a tabela pessoal $ query = $ db-> query ("SELECT * FROM personal"); ?> var13 ->
Recursos humanos

 obter linhas ($ query)) {?> var13 -> 
 
 EU IA  Nome  Área  Posição  E-mail  Ações

O resultado do código php que mostra a tabela será o seguinte:

Em seguida, criaremos um arquivo de folhas de estilo chamado estilos CSS para dar à tabela e às linhas algum design mais tarde, ao passar o mouse sobre elas.

Vamos adicionar o arquivo ao cabeçalho da página da web

Conseguimos mostrar a tabela que tínhamos no mysql usando php e html. Agora vamos criar um script que por meio do jquery nos permite adicionar e salvar dados dinamicamente sem redirecionar a web e sem abrir outra tela, mas fazendo isso na mesma linha de dados.
No código abaixo da tabela, adicionamos um botão para invocar a função jquery para adicionar novas linhas.

Novo

Após o botão iremos adicionar o script jquery que tornará possível adicionar linhas

No script, devemos usar os nomes dos elementos html como uma matriz, caso seja necessário adicionar várias linhas, os dados serão salvos como uma matriz, cada um em uma posição de 0,1,2 que nos lerá do php .
Por esse motivo, o nome, por exemplo, indica com dois colchetes que se trata de uma matriz.
Criamos o arquivo que gravará os dados no banco de dados mysql, ele pega os dados das caixas de texto e, quando o enviamos, lemos os arrays e passamos pelo loop for.

 MySQL (); // lemos os dados enviados e os armazenamos em matrizes $ name = $ _ POST ['name']; $ area = $ _ POST ['area']; $ post = $ _ POST ['post']; $ email = $ _ POST ['email']; // percorremos e inserimos os dados na tabela mysql para ($ i = 0; $ i query ($ sql);} // retornamos ao cabeçalho da página inicial ('Location: index.php');?> var13 - ->

Ao pressionar o botão salvar, os dados serão salvos no banco de dados Mysql e voltaremos para a lista. Lembre-se de que não há validações e pretende-se apenas mostrar aqui como adicionar linhas a uma tabela e poder editar a informação em grandes listas de forma mais fácil e confortável.

PROLONGAR

Se quisermos dizer ao usuário o que inserir em cada caixa, podemos usar a propriedade placeholder para escrever um comentário na caixa de texto. Este comentário desaparecerá se algo for escrito na caixa de texto e não será salvo se nada for escrito, serve apenas para indicar ao usuário que tipo de dado escrever ou alguma outra indicação que o ajude na hora de inserir os dados.
Para fazer isso, alteramos o script que gera a nova linha, adicionamos um espaço reservado para cada caixa de texto e o comentário ou indicação correspondente que queremos mostrar ao usuário.

 var row = '
 '+ ''+ ''+ ''+ '

';

PROLONGAR

Ao inserir uma nova linha, veremos as indicações em cada caixa de texto. Além do script para adicionar linhas, poderíamos implementar um script para validar os dados de cada caixa de texto com o plugin jquery.validator. Em outro tutorial, veremos mais tarde como editar dados e excluir dados e a linha correspondente da tabela lendo os dados do ID da célula para criar dinamicamente as ações de edição e exclusão na mesma tabela HTML.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo