How to add a column at page run time?

Question

In Html5/css/bootstrap 4... How can I add a column at page run time?

    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>

How to add one more row to this table when the user clicks the button...?

Answer 1

You need to create a function that adds a new line.

First, put a class on the button, like this:

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

Afterward:

$(".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)
})

Answer 2

You can do so, at runtime you already add the missing column by counting the number of rows. Create an event for the button to add new lines, also counting the number of lines from a function:

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>