J'ai une table HTML que je rendu avec problème p> Lorsque ma Data.Length est également divisée par 4, il affiche deux rangées de quatre colonnes, mais lorsque la longueur de sa longueur est 6, il affiche deux lignes de 3-3 colonnes qui ne sont pas Correct, si j'ai des données ayant une longueur de 5, il ne montre que 4 articles, pas le cinquième, je ne sais pas quelle gaffe je fais p> p> json code>, en fonction de mon exigence, je dois afficher les données dans 4 colonnes Quelle taille de la taille des données est
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
4 Réponses :
Je ferais cela simple et le faisiez-le de cette façon:
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="DisplayTable"></div>
Même code pour 2 ou 3 colonnes . Veuillez noter que les paramètres de fonction JavaScript par défaut sont Non compatible avec IE .
Votre première boucle fonctionne 1 fois moins que vous le souhaitez, et je ne sais pas comment votre deuxième boucle fonctionne. Changez-le à:
for (i = 0; i <= split; i++) { // changed this
$tr = $("<tr/>", {
"class": "filterData"
});
for (j = 0; j < 4; j++) {
$.each(tableValue[(i*4) + j], function(key, value) { // changed this
console.log(j)
$("<td/>", {
"class": "text-left color" + (j + 1)
}).html(value).appendTo($tr);
});
}
Chaque objet de la matrice dispose de 4 entrées afin de remplir 4 colonnes chaque objet remplira une ligne avec les colonnes 1 et 3 ayant les touches et 2 et 4 pour les valeurs. Les détails sont commentés dans la démo.
p>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <main></main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script> <div id="DisplayTable"></div>
Je vois d'abord, n'utilisez pas
rond , maismath.ceil () à la place ... autre chose ... bien meilleure création de code html ordinaire, qu'append ... Un de plus: dans le cas où les éléments% 4 n'est pas zéro que vous devez ajouter plus de cellules ... bonne chance.@skobaljic vous dites de changer d'approche et de nouveau code?
Eh bien, je le ferais autre chose, mais vous pouvez le faire cependant que vous aimez.
@skobaljic Je ne reçois pas l'idée que j'ai faite autant de choses en plus de cela, alors je ne peux donc pas changer le code :(
Peut nous attirer une photo de ce que vous essayez d'atteindre? Il est difficile de dire sans représentation visuelle.