How to add a column at page runtime?

Navigation
1

In html5 / css / bootstrap 4 ... How can I add a column at runtime of the page? 

    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 do I add another row in this table when the user clicks the ...? button.

    
asked by anonymous 12.06.2018 / 06:14

2 answers

1

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

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

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

Then: 

$(".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)
})
    
12.06.2018 / 06:35
1

You can do so, at runtime already adds the missing column by counting the number of rows. Create an event for button to add new rows, also counting the number of rows 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><scriptsrc="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>
    
12.06.2018 / 07:08
Create a frequency table based on another column in Python Create a column for each row returned from Select