print table from an array of defined size

3
<table border='1' id="tabela">
    <tbody>
    </tbody>
</table>

Would like to print differently

$(document).ready(function(){
    var i =0;
    while(i< 100){
        var resto = i%10;

        if(i%10 == 0){
            $("tbody").append("<tr>"); 
        }
        $("tbody").append("<td>"+i+"</td>"); 
        i++;
        //document.getElementById("tabela").innerHtml += "<tr><td>"+i+"</tr></tr>"; 
        if(i%10 == 0){
            $("tbody").append("</tr>"); 
        } 
    }    
});

In fact, I wanted to print it this way:

[0] [5] [10] [15] [20]

[1] [6] [11] [16] [21]

[2] [7] [12] [17] [22]

[3] [8] [13] [18] [23]

[4] [9] [14] [19] [24]

How do I do it?

link

    
asked by anonymous 23.07.2015 / 02:51

2 answers

0

I'm not good with JavaScript but you can get to this solution, keeping in mind your assertion that the table has a specific size:

$(document).ready(function(){
    var i = 0;
    var linha = 0;
    var id = 0;
    var pos = 0;
    while(i < 100){
      if(linha < 10) {
        $("tbody").append("<tr id="+id+"></tr>");
        $("#"+id).append("<td>"+i+"</td>");
        linha++;
        id++;
      } else {
        if(pos==10) {
          pos = 0
        }
        $("#"+pos).append("<td>"+i+"</td>");
        pos++;
      }
      i++;
    }
});

link

    
23.07.2015 / 03:48
0

Use two for loops. The first for will be for the iteration of the lines, and the second for , internal to the first, will iterate the columns.

$(document).ready(function(){
    // De acordo com a pergunta, o número de colunas da tabela é fixo ou pré determinado.
    var numeroDeColunas = 5;

    // O número de elementos do "array".
    var valorMaximo = 100;

    // Obtém o número de linhas.
    var numeroDeLinhas = valorMaximo / numeroDeColunas;

    // Esse laço faz a iteração das linhas.
    for (var i = 0; i < numeroDeLinhas; i++) {
        $("tbody").append("<tr id='linha"+ i +"'></tr>"); 

        // Faz a iteração das colunas.
        for (var j = 0; j < numeroDeColunas; j++) {
            $("#linha"+i).append("<td>"+ i + (5 * j) +"</td>");
        }
    }
});
    
23.07.2015 / 11:45