0

Como posso listar valores das colunas em um "<table>" ?

inserir a descrição da imagem aqui

Quero listar todos os valores das rows nas <tr> como mostra na imagem

inserir a descrição da imagem aqui

Código da table:

<table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                  <thead>
                    <tr>
                      <th>BANDEIRA</th>
                      <th>TIPO</th>
                      <th>BIN</th>
                      <th>QUANTIDADE</th>
                      <th>VENDEDOR</th>
                      <th class="disabled-sorting text-right">Ações</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                       <th>BANDEIRA</th>
                      <th>TIPO</th>
                      <th>BIN</th>
                      <th>QUANTIDADE</th>
                      <th>VENDEDOR</th>
                      <th class="disabled-sorting text-right">Ações</th>
                    </tr>
                  </tfoot>
                  <tbody>
                    <tr>
                      <td>ROW BANDEIRA</td>
                      <td>ROW TIPO</td>
                      <td>ROW BIN</td>
                      <td>ROW QUANTIDADE</td>
                      <td> ROW VENDEDOR</td>
                      <td class="text-right">
                        <a href="#" class="btn btn-info btn-link btn-icon btn-sm like"><i class="fa fa-heart"></i></a>
                        <a href="#" class="btn btn-warning btn-link btn-icon btn-sm edit"><i class="fa fa-edit"></i></a>
                        <a href="#" class="btn btn-danger btn-link btn-icon btn-sm remove"><i class="fa fa-times"></i></a>
                      </td>
                    </tr>

                  </tbody>
                </table>
              </div>

EDIT 2: Preciso criar uma form que faça um POST na própria página com todos os valores dos <td>. Tentei desta forma, mas não consegui:

 <form method="POST">       
        <tbody>
        <?php foreach ($resultado as $row) { ?>
            <tr>
               <td><?php echo $row['a']; ?></td>
                <td><?php echo $row['b']; ?></td>
                <td><?php echo $row['c']; ?></td>
                <td><?php echo $row['d']; ?></td>
                <td><?php echo "R$ " . $row['e']; ?></td>
                <td><?php echo $row['v']; ?></td>
                <td class="text-right">
                    <input type="submit" value="Info"></input>
                </td>
            </tr>
        <?php } ?>
        </form>

Exemplo: Clicar no botão INFO, vai fazer um POST com o valor da row A, row B e todas as outras rows

1 Resposta 1

2

1. Como posso listar valores das colunas em um <table>?

Assumindo como base que você já tem uma conexão ao banco de dados pelo PHP você poderia listar valores de uma tabela de uma maneira bem simples.

Para começar podemos receber os dados do banco, é com base neles que a nossa tabela será gerada dinamicamente.

    $resultado = array(); // Cria um array para receber o resultado
    $query = "SELECT * FROM <nome_da_sua_tabela_aqui>"; // Expressão SQL que irá ser executada
    $result = mysqli_query($this->connection, $query); // Executa a consulta com base na query
    $resultado = $result->fetch_all(MYSQLI_ASSOC); // Faz uma associação

Tendo o resultado/dados vamos mostrá-los na tabela.

<table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th class="disabled-sorting text-right">Actions</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>BANDEIRA</th>
        <th>TIPO</th>
        <th>BIN</th>
        <th>QUANTIDADE</th>
        <th>VENDEDOR</th>
        <th class="disabled-sorting text-right">Ações</th>
    </tr>
    </tfoot>
    <tbody>
    <?php foreach ($resultado as $row) { ?>
        <tr>
            <td><?php echo $row['nome_da_coluna_que_quer_mostrar_aqui']; ?></td>
            <td><?php echo $row['nome_da_coluna_que_quer_mostrar_aqui']; ?></td>
            <td><?php echo $row['nome_da_coluna_que_quer_mostrar_aqui']; ?></td>
            <td><?php echo $row['nome_da_coluna_que_quer_mostrar_aqui']; ?></td>
            <td class="text-right">
                <a href="#" class="btn btn-info btn-link btn-icon btn-sm like"><i class="fa fa-heart"></i></a>
                <a href="#" class="btn btn-warning btn-link btn-icon btn-sm edit"><i class="fa fa-edit"></i></a>
                <a href="#" class="btn btn-danger btn-link btn-icon btn-sm remove"><i class="fa fa-times"></i></a>
            </td>
        </tr>
    <?php } ?>
</table>

Dentro da tabela teremos várias linhas, ou melhor, vários tr. Na primeira etapa recebemos os dados do banco de dados, e a partir deles vamos mostrar os dados na tabelas com base no foreach, que fornece uma maneira fácil de iterar sobre arrays.

A cada iteração, o valor do elemento atual é atribuído a $row e o ponteiro interno do array avança uma posição (então, na próxima iteração, se estará olhando para o próximo elemento, ou linha do banco de dados).

Mais informações sobre o foreach aqui.

Aqui neste tutorial você tem um guia completo, para caso não tenha feito nem a conexão ao banco com o PHP.

2. Preciso criar uma form que faça um POST na própria página com todos os valores dos <td>

Para isso você tem duas opções, que eu conheço. Uma é a mais recomendada e outra seria uma gambiarra, que não recomendaria.

Primeiro você podeira gerar vários inputs do tipo hidden que armazenariam esses valores da tabela, ou melhor, das linhas da tabela.

A segunda opção é usar AJAX, e logo pressuponho que conheça. Além disso, vou usar jQuery aqui para facilitar.

Você poderia pegar no evento de click do botão de submit e receber os dados do td. Ficaria mais ou menos assim.

 $(document).ready(function () {
     // No click do botão de submit
     $('#btn_submit').click(function () {
         // Recebe os dados do formulário
         var valorTd = $('.class_da_td').text();
         var valorTd2 = $('.class_da_td2').text();
         // Envia a requisição ajax
         $.ajax({
             url: "ajax/form.php", // Arquivo php que vai receber os dados
             data: { // Recebe os dados das td´s e passa em um json
             valorTd: valorTd,
             valorTd2: valorTd2,
             },
             global: false,
             type: "POST",
             contentType: "application/x-www-form-urlencoded;charset=utf-8",
             dataType: "html",
             success: function (data) { // se tudo der certo mostra essa mensagem
                alert('Requisição realizada com sucesso!');
          },
        }).responseText;
    });
});

No arquivo form.php você teria mais ou menos essa estrutura:

<?php
    echo $_REQUEST['valortd'];
    echo $_REQUEST['valortd2'];
    // A partir disso podemos fazer o que for necessário com esses dados
    // Desde operações como salvar, apagar, editar, o que seja.
?>

Lembrando que isso é só um pequeno exemplo. Muitas coisas foram abstraídas para facilitar o entendimento.

7
  • Perfeito, obrigado. Commented 22/08/2018 às 22:54
  • Qualquer dúvida é só chamar. Se quiser também dar um ponto positivo a minha resposta eu agradeceria :) Commented 22/08/2018 às 23:06
  • Não consigo dar upvote, não tenho reputação suficiente. Commented 22/08/2018 às 23:25
  • Amigo, só mais uma dúvida. Se eu quisesse criar uma "form" para cada foreach, para fazer um POST com a bin, como eu poderia fazer isso ? Commented 22/08/2018 às 23:31
  • O submit do form seria o "<a href="#" class="btn btn-info btn-link btn-icon btn-sm like"><i class="fa fa-heart"></i></a>" Commented 22/08/2018 às 23:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .