Error mounting HTML table with jQuery

Question

I need to create this screen:

The problem is that the code I made generates 9 columns in a row instead of generating 3 columns per row:

That is the code:

@{
    ViewBag.Title = "Home Page";
}

<div class="col-md-12">
    <table id="tblQuadro" class="table  col-md-12">
        <tbody>
            <tr>
            </tr>
        </tbody>
    </table>
</div>
@section Scripts{

<script type="text/javascript">
    $(document).ready(function () {

        $.getJSON("/Arquivos/arquivoJson.json", function (data) {
            var nomeQuadro = data;

            var contarCol = 0;

            for (i = 0; i < nomeQuadro.length; i++) {
                var _nome = '';                 

                if (contarCol <= 2) {

                    _nome = '<td>' + nomeQuadro[i].nome + '</td>';
                    $("#tblQuadro tbody tr").append(_nome);

                }
                else if (contarCol >= 3 && contarCol < 6) {

                    if (contarCol == 3) {
                        $("#tblQuadro tbody").append('<tr><td></td><td></td><td></td></tr>');
                        _nome = '<td>' + nomeQuadro[i].nome + '</td>';
                        $("#tblQuadro tbody tr").append(_nome);
                    } else {
                        _nome = '<td>' + nomeQuadro[i].nome + '</td>';
                        $("#tblQuadro tbody tr").append(_nome);
                    }
                }
                else if (contarCol >= 6 && contarCol <= 9) {

                    if (contarCol == 6) {
                        $("#tblQuadro tbody").append('<tr><td></td><td></td><td></td></tr>');
                        _nome = '<td>' + nomeQuadro[i].nome + '</td>';
                        $("#tblQuadro tbody tr").append(_nome);
                    } else {
                        _nome = '<td>' + nomeQuadro[i].nome + '</td>';
                        $("#tblQuadro tbody tr").append(_nome);
                    }


                }
                contarCol++;
            }

        });

    });

    </script>
}

JSON file

[
  {
    "nome": "Quadro 1"
  },
  {
    "nome": "Quadro 2"
  },
  {
    "nome": "Quadro 3"
  },
  {
    "nome": "Quadro 4"
  },
  {
    "nome": "Quadro 5"
  },
  {
    "nome": "Quadro 6"
  },
  {
    "nome": "Quadro 7"
  },
  {
    "nome": "Quadro 8"
  },
  {
    "nome": "Quadro 9"
  }
]

Where is the error?

Answer 1

See that with only 1 line of code inside the for you can reach the goal:

var data = [
  {
    "nome": "Quadro 1"
  },
  {
    "nome": "Quadro 2"
  },
  {
    "nome": "Quadro 3"
  },
  {
    "nome": "Quadro 4"
  },
  {
    "nome": "Quadro 5"
  },
  {
    "nome": "Quadro 6"
  },
  {
    "nome": "Quadro 7"
  },
  {
    "nome": "Quadro 8"
  },
  {
    "nome": "Quadro 9"
  }
];

$(document).ready(function () {

   var nomeQuadro = data;
   var _nome = '';
   for(var i = 0; i < nomeQuadro.length; i++){
      _nome += (i != 0 && i%3 == 0 ? '</tr><tr>' : '') + '<td>' + nomeQuadro[i].nome + '</td>';
   }

   $("#tblQuadro tbody").append('<tr>' + _nome + '</tr>');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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="col-md-12">
    <table id="tblQuadro" class="table  col-md-12">
        <tbody>
        </tbody>
    </table>
</div>

Before the for i declare the variable var _nome = ''; empty. It will be used to create table rows. In this part:

(i != 0 && i%3 == 0 ? '</tr><tr>' : '')

I’ll close and open a new line in case the i is different from 0 and the division of i for 3 be exact (rest 0. This is the function of the operator %).

In the end I conclude the result of for with an opening and closing of the line and make the append at once in the tbody:

$("#tblQuadro tbody").append('<tr>' + _nome + '</tr>');

Now, the tbody must be empty in HTML:

<div class="col-md-12">
    <table id="tblQuadro" class="table  col-md-12">
        <tbody>
        </tbody>
    </table>
</div>