1

Em html5/css/bootstrap 4... Como eu posso adicionar uma coluna em tempo de execução da página?

    div class="container">
      <h1 class="page-header">Tabelas com Bootstrap</h1>
      <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover table table-bordered table table-striped">
          <tbody>
            <tr>
              <th>1</th>
              <td>Conteúdo</td>
              <td>Conteúdo</td>
            </tr>
            <tr>
              <th>2</th>
              <td>Conteúdo</td>
              <td>Conteúdo</td>
            </tr>
            <tr>
              <td>Conteúdo</td>
              <td>Conteúdo</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="container">
     &copy; 2016 - Web Dev Academy
    </div>
   <button type="button">Adicionar mais uma linha
    </button>

Como fazer para adicionar mais uma linha nessa tabela quando o usuário clicar no botão...?

0

2 Respostas 2

1

Você precisa criar uma função que adicione uma nova linha.

Antes, coloque uma classe no botão, assim:

<button type="button" class="addBtn">Adicionar mais uma linha</button>

Depois:

$(".addBtn").on("click", function(){
  var newRow = $("<tr>"), // Crio o novo tr
      idx = $(".table tr").length; // Capturo a quantidade de tr que tem, para criar o proximo
  // Aqui adiciono as colunas
  newRow.append($("<th>"+(idx+1)+"</th>"));
  newRow.append($("<td>Conteúdo</td>"));
  newRow.append($("<td>Conteúdo</td>"));

  // Por fim, adiciono a nova linha à tabela.
  $(".table").append(newRow)
})
1

Pode fazer assim, em tempo de execução já adiciona a coluna que falta, contando a quantidade de linhas. Crie um evento para o button para adicionar novas linhas, também contando a quantidade de linhas a partir de uma função:

function linha(){
   return $(".table tr").length;
}

$(".table tr:eq(2)").prepend("<th>"+linha()+"</th>"); // adiciona nova th na 3ª linha

$("button").click(function(){
   var nova_linha = '<tr>'
   +'<th>'+ (linha()+1) +'</th>'
   +'<td>Conteúdo</td>'
   +'<td>Conteúdo</td>'
   +'</tr>';
  
   $(".table").append(nova_linha);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="container">
   <h1 class="page-header">Tabelas com Bootstrap</h1>
   <div class="table-responsive">
     <table class="table table-striped table-bordered table-hover table table-bordered table table-striped">
       <tbody>
         <tr>
           <th>1</th>
           <td>Conteúdo</td>
           <td>Conteúdo</td>
         </tr>
         <tr>
           <th>2</th>
           <td>Conteúdo</td>
           <td>Conteúdo</td>
         </tr>
         <tr>
           <td>Conteúdo</td>
           <td>Conteúdo</td>
         </tr>
       </tbody>
     </table>
   </div>
 </div>
 <div class="container">
  &copy; 2016 - Web Dev Academy
 </div>
<button type="button">Adicionar mais uma linha
 </button>

3
  • Quando você usa o comando append ele já adiciona ao final. Não é necessário, e até contra producente, caso ele queira inserir mais linhas. 12/06/2018 às 16:15
  • O append eh pra adicionar uma linha inteira no final da tabela. O prepend pra adicionar uma coluna no inicio da linha. Qual o problema?
    – Sam
    12/06/2018 às 18:07
  • muito obrigado aos dois! as respostas servem para meus estudos. Eu agradeço de coração! Em breve estarei comentando e irei ajudar aos iniciantes, assim como vocês! Muito obrigado a você e ao @BrunnoVianna! 12/06/2018 às 19:50

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 .