Publicado em 15 de jun.

Salvar dados de uma tabela html no banco de dados mysql

Pessoal estou precisando de uma ajuda.

	Alguém sabe explicar como salvar os dados de uma tabela html <table>, no banco de dados mysql.

	Por exemplo estou adicionando dinamicamente com jquery cada linha só é adicionada uma linha se for necessária e quando terminar de adicionar as linhas com os dados escolhidos clico no botão salvar e o que tiver na tabela salvar no banco de dados mysql.

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Williams Duarte· 16 de jun.

Depende!

É difícil dizer qual seria a maneira mais simples com essas informações, Eu provavelmente pegaria o novo evento de linha, obtendo os dados e fazendo uma solicitação POST com ajax em uma API toda vez que uma nova linha é adicionada. Tente adicionar alguns trechos de códigos, quem sabe a comunidade, ao invés de tentar adivinhar oque está fazendo, mostre uma solução melhor, baseado no que você já fez.

Porém, particularmente faria isto com vue.js, ja que é reativo.

emmanuelsiqueira30· 16 de jun.

23 horas atrás, emmanuelsiqueira30 disse:

Pessoal estou precisando de uma ajuda.

 Alguém sabe explicar como salvar os dados de uma tabela html <table>, no banco de dados mysql.

 Por exemplo estou adicionando dinamicamente com jquery cada linha só é adicionada uma linha se for necessária e quando terminar de adicionar as linhas com os dados escolhidos clico no botão salvar e o que tiver na tabela salvar no banco de dados mysql.

	 

	index.php

<!doctype html>

<html lang="en">
 <head>
 <!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

 <title>Hello, world!</title>
 </head>
 <body>

<form action="test.php" method="post">

	<table class="table" id="products-table">
 <thead>
 <tr>
 <th>PRODUTO</th>
 <th>HORA</th>
 <th>ESTADO</th>
 <th></th>
 </tr>
 </thead>
 <tbody>
 <tr id="linha">
 <td><select name="ativo"><option>LIQUIDIFICADOR</option></select></td>
 <td><input type="time" name="hora"></td>
 <td><select name="acao"><option>PE</option></select></td>
 <td><button onclick="AddTableRow()" type="button">Adicionar</button></td>
 <td><button onclick="RemoveTableRow()" type="button">Remover</button></td>
 </tr>

 </tbody>

</table>

<input type="submit" value="Cadastrar">
</form>

 <!-- Optional JavaScript -->
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
	<script src="js/scripts.js"></script>
 </body>
</html>

	 

	scripts.js

(function($) {

 AddTableRow = function() {

 var newRow = $("<tr id='linha'>");
 var cols = "";

 cols += '<td><select name="ativo"><option>GBP/JPY</option></select></td>';
 cols += '<td><input type="time" name="hora"></td>';
	cols += '<td><select name="acao"><option>PUT</option></select></td>';
 cols += '<td>';
	cols += '<button onclick="AddTableRow()" type="button">Adicionar</button>';
 cols += '<button onclick="RemoveTableRow()" type="button">Remover</button>';
 cols += '</td>';

 newRow.append(cols);
 $("#products-table").append(newRow);

 return false;
 };

})(jQuery);

function RemoveTableRow() {
	document.getElementById("linha").remove();
}

10 horas atrás, Williams Duarte disse:

Depende!

Porém, particularmente faria isto com vue.js, ja que é reativo.

Editei a pergunta.

Williams Duarte· 17 de jun.

Passe os dados dos forms por Array, seja eles selects, inputs etc, desta forma, ou você manda a request diretamente para o php ou para o proprio jquery efetuar a requisição por ajax.

emmanuelsiqueira30· 18 de jun.

Em 16/06/2020 at 21:48, Williams Duarte disse:

Passe os dados dos forms por Array, seja eles selects, inputs etc, desta forma, ou você manda a request diretamente para o php ou para o proprio jquery efetuar a requisição por ajax.

<select name="ativo[]">...</select>

  

	 

	E como pego os valores das células da tabela?

Williams Duarte· 18 de jun.

Dois exemplos em UM:

$( "form" ).submit(function( event ) {

 console.log( $( this ).serializeArray() );
 event.preventDefault();

 var ativo = $("input[name='ativo[]']")
 .map(function(){
 return $(this).val();
 }).get();

 console.log(ativo);

});

	[https://api.jquery.com/serializeArray/](https://api.jquery.com/serializeArray/)

https://api.jquery.com/jQuery.map/

Para enviar para o php, use ajax, só montar o payload, caso queira validar os dados, no lado cliente, senão, envie os dados serializados, que estão em $( this ).serializeArray().

Exemplo da documentação, substitua o data pelo seu payload.

$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})

 .done(function( msg ) {
 alert( "Data Saved: " + msg );
 });

	[https://api.jquery.com/jquery.ajax/](https://api.jquery.com/jquery.ajax/)