Добавить новую строку после указанного количества добавленных столбцов javascript

Я работаю над созданием панели с кнопками, каждая кнопка будет представлять собой одну машину. Эти кнопки генерируются в зависимости от результатов JQuery.Добавить новую строку после указанного количества добавленных столбцов javascript

В настоящее время я хотел бы добавить 10 кнопок в одну строку, а затем продолжить добавлять их в новую строку. Кроме того, моя другая проблема заключается в том, что я хочу изменить цвет кнопки в зависимости от результата ajax.

Я пробовал следующий код, но это дает мне в результате изображение, которое я приложил ниже.

IMAGE: http://i68.tinypic.com/296oysw.png

(К сожалению, не удалось опубликовать изображение, так как я новичок в Stackoverflow)

$(document).ready(function(){ 
    var d = new Date(); 
    var now = d.getTime() + 300; 
    var color; 
    var u = '/read/machines/' +{{userid}}; 
    $.ajax({ 
     url: u, 
     type: "GET", 
     dataType: 'json', 
     success: function(data) { 
     $.each(data, function(i, item) {  
      if (item.lastCommunication > now){ 
      color = "success"; 
      }else{ 
       color = "warning"; 
      } 
      if (i != 0 && i%10 == 0){ 
       $('<tr>').append(
       $('<td>').append(
        $('<button type="info" id="info" class="btn btn-'+color +' btn-lg" ontouchstart="touchAvailable=true; machineInfo('+item.id +');" onclick="if(!touchAvailable) machineInfo('+item.id +');">'+item.name+'</button>') 
         ) 
        ).appendTo('#body'); 
      }else{ 
      $('<td>').append(
        $('<button type="info" id="info" class="btn btn-'+color +' btn-lg" ontouchstart="touchAvailable=true; machineInfo('+item.id +');" onclick="if(!touchAvailable) machineInfo('+item.id +');">'+item.name+'</button>') 
        ).appendTo('#body'); 
      } 
     }); 
     } 
     }); 
    }); 
    </script>

источник

2016-09-30 natilas12

Я думаю, что td элемент еще филиал шоу будет добавить к #body tr:last

if(i%10 == 0){ 
$('<tr>').appendTo('#body'); 
} 

$('<td>').append(BUTTON_CODE).appendTo('#body tr:last');

источник

2016-09-30 01:50:01 amow

Amow спасибо за Ваш ответ, просто попытался это, но я получил это в результате: http://i68.tinypic.com/2el86j5.png – natilas12

если вы не имеете первый тр в вашем #body первоначально , вы должны изменить код – amow

, вы были совершенно правы! теперь он отображает всего 10 кнопок на строку, однако он добавляет дважды кнопку, которая входит в новую строку следующим образом: http://i67.tinypic.com/2ngrdbc.png. Кроме того, знаете ли вы, почему он не принимает цвет в зависимости от значений из 'lastCommunication' в JQuery? – natilas12

Попробуйте создать строку первой .... когда вы дойдете до десятого пункта или последнего пункта, добавьте строку и создайте новую строку (при необходимости)

var $tr =$('<tr>') 
$.each(data, function(i, item) { 
    if (item.lastCommunication > now){ 
     color = "success"; 
    }else{ 
     color = "warning"; 
    } 
    if (i != 0 && i%10 == 0 || i==data.length-1){ 
     // 10th button or last button append row 
     $tr.append(
       $('<td>').append(
         $('<button type="info" id="info" class="btn btn-'+color +' btn-lg" ontouchstart="touchAvailable=true; machineInfo('+item.id +');" onclick="if(!touchAvailable) machineInfo('+item.id +');">'+item.name+'</button>') 
       ) 
     ).appendTo('#body'); 
     //create new row 
     if(i !== data.length-1){ 
      $tr =$('<tr>'); 
     } 
    }else{ 
     $('<td>').append(
       $('<button type="info" id="info" class="btn btn-'+color +' btn-lg" ontouchstart="touchAvailable=true; machineInfo('+item.id +');" onclick="if(!touchAvailable) machineInfo('+item.id +');">'+item.name+'</button>') 
     ).appendTo($tr); 
    } 
});

источник

2016-09-30 02:05:04 charlietfl

Добавить новую строку после указанного количества добавленных столбцов javascript

ответ

Смежные вопросы