4

Preciso criar essa tela:

inserir a descrição da imagem aqui

O problema é que o código que fiz gera 9 colunas em uma linha ao invés de gerar 3 colunas por linha:

inserir a descrição da imagem aqui

Esse é o código:

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

Arquivo JSON

[
  {
    "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"
  }
]

Onde está o erro?

1 Resposta 1

2

Veja que com apenas 1 linha de código dentro do for você consegue chegar no objetivo:

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>

Antes do for eu declaro a variável var _nome = ''; vazia. Ela será usada para criar as linhas da tabela. Nesta parte:

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

Vou fechar e abrir uma nova linha caso o i seja diferente de 0 e a divisão de i por 3 seja exata (resto 0. Essa é a função do operador %).

No final eu concateno o resultado do for com uma abertura e fechamento da linha e faço o append de uma só vez no tbody:

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

Agora, o tbody deve estar vazio no HTML:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .