Generate values dynamically in a table

Navigation
0

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

Insteadoflisting1,1,1,1,1,1...wouldbe1,2,3,4,5,6...

Myhtmltable:

#{extends'main.html'/}<script>organizarIndices();functionorganizarIndices(){vartable=document.getElementById('tabela');vartotal=table.rows.length;for(vari=0;i<total;i++){if(i>0){table.rows[i].cells[0].innerHTML=i;}}}</script><metahttp-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>

    
asked by anonymous 26.07.2017 / 22:06

1 answer

2

Run the organizarIndices function once the page has 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>
    
26.07.2017 / 22:28
Problem using the hashid.id library [closed] Print multiple arrays separately