Generate values dynamically in a table

Question

I am listing the number of equipment saved in my system in a table, only that they will not always have saved equipment, I can have an empty table, or incomplete. What I need is to list the lists of this table. My table can have 5 or 10 values, that is, always 5 or 10 lines to be filled in. So I would like to dynamically generate the amount of rows in this table.
As shown below:

Instead of listing 1,1,1,1,1,1... it would be 1,2,3,4,5,6...

My html table:

#{extends 'main.html' /}

<script>
organizarIndices();

function organizarIndices(){
  var table = document.getElementById('tabela');
  var total = table.rows.length;
  for(var i=0; i<total; i++){
  if(i > 0){
      table.rows[i].cells[0].innerHTML = i;
  }
  }
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class="row">
<div class="col-lg-12">
    <ol class="breadcrumb">
        <li><i class="fa fa-dashboard"></i> <a
            href="@{Application.index}">Dashboard</a></li>
        <li><i class="fa fa-cubes"></i> <a
            href="@{Patchpanels.listagemPatchpanel}">Patch panels</a></li>
        <li class="active"><i class="fa fa-edit"></i> Detalhes do patch
            panel</li>
    </ol>
</div>
 </div>
  <!-- /.row -->
   <div class="panel-body">
    <ul class="list-group">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-cubes"></i> Detalhes Patch panels
                    </h3>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover table-striped" id="tabela">
                            <thead>
                                <tr>
                                    <th>Porta</th>
                                    <th>Equipamento</th>
                                </tr>
                            </thead>
                            <tbody>
                                #{list items:p.portas, as:'porta'}
                                <tr>
                                    <td><b></b></td>
                                    <td>${porta.descricao}
                                            <div class="pull-right action-buttons">
                                                <span class="btn btn-success btn-xs" id="alert-target"> Ativar</span> <span
                                                    class="btn btn-warning btn-xs"> Reiniciar</span> <span
                                                    class="btn btn-danger btn-xs"> Desativar</span>
                                            </div>
                                        </td>
                                </tr>
                                #{/list}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </ul>
</div>

Answer 1

Perform the function organizarIndices as soon as the page has been loaded and ready

organizarIndices();

function organizarIndices(){
  var table = document.getElementById('tabela');
  var total = table.rows.length;
  for(var i=0; i<total; i++){
      if(i > 0){
          table.rows[i].cells[0].innerHTML = i;
      }
  }
}

<table id="tabela">
<thead>
    <tr>
        <th>Porta</th>
        <th>Equipamento</th>
    </tr>
</thead>
<tbody>    
    <tr>
        <td>
        </td>
        <td>
          Equipamento 
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
          Equipamento
        </td>
    </tr>
</tbody>
</table>