Блог

Мне нужно динамически создать следующий HTML

 <tr>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">A<span></span></label></td>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">B<span></span></label></td>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">C<span></span></label></td>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">D<span></span></label></td>
  </tr>
  <tr>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass" >E<span></span></label></td>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">F<span></span></label></td>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass" >G<span></span></label></td>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">H<span></span></label></td>
  </tr>
  

Как вы можете видеть, каждый tr должен содержать только 4 столбца

Это мой код

 var myarray = ["A", "B","C","D","E","F","G","H"]
$(document).ready(function()
{
        var html = ''
        for (var i = 0; i < myarray.length; i  )
        {
                html  = '<td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">'   myarray[i]   '<span></span></label></td>'
        }
        $("#mytable tbody").append(html);
});
  

Как вы можете видеть из кода, я просто добавляю td в таблицу, но не смог сделать это в соответствии с указанной структурой, и размер массива также не фиксирован (это может быть любое количество элементов)

Это моя скрипка

Не могли бы вы сообщить мне, как добавить, поскольку каждый tr должен содержать только 4 элемента

https://jsfiddle.net/dHZS9/701/

Вам просто нужно проверить index , убедитесь, что остаток 4 равен 0 (где 4 это натуральный индекс, полученный с помощью i 1 ):

 var myarray = ["A", "B", "C", "D", "E", "F", "G", "H"]
$(document).ready(function() {
  var html = ''
  for (var i = 0; i < myarray.length; i  ) {
    html  = '<td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">'   myarray[i]   '<span></span></label></td>';
    if ((i   1) % 4 == 0)
      html  = '</tr><tr>';
  }
  $("#mytable tbody").append('<tr>'   html   '</tr>');
});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="mytable">
  <tbody>

  </tbody>
</table>  

Предварительный просмотр

Другой способ

 var myarray = ["A", "B","C","D","E","F","G","H"]
$(document).ready(function()
{
        var html = ''
      
        for (var i = 0; i < myarray.length;)
        {
        html ="<tr>";
         for(var j=4; j>=1; j--){
                html  = '<td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">'   myarray[i  ]   '<span></span></label></td>';
                }
                   html ="</tr>";
               $("#mytable tbody").append(html);
               html='';
        }

});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="mytable">
   <tbody>
    
   </tbody>
</table>