Error while mounting HTML table with jQuery

Navigation
4

I need to create this screen:

TheproblemisthatthecodeIhavegeneratedgenerates9columnsinarowinsteadofgenerating3columnsperline:

Thisisthecode:

@{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 Archive 

[
  {
    "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?

    
asked by anonymous 28.12.2018 / 14:41

1 answer

2

See that with only 1 line of code within 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><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="col-md-12">
    <table id="tblQuadro" class="table  col-md-12">
        <tbody>
        </tbody>
    </table>
</div>

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

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

I'm going to close and open a new line if the i is different from 0 and the division of i with 3 is exact (rest 0 . .

In the end I concatenate the result of % with an opening and closing of the line and append at one time in for : 

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

tbody should now be empty in HTML: 

<div class="col-md-12">
    <table id="tblQuadro" class="table  col-md-12">
        <tbody>
        </tbody>
    </table>
</div>
    
28.12.2018 / 16:13
Error compiling php 5.3.28 using php-build Change the indentation of TAB to spaces in Vim