在指定的列数之后添加新的行

Add new row after specified number of columns added javascript

本文关键字：添加 之后      更新时间：2023-09-26

我一直在努力获得一个带有按钮的仪表板，每个按钮将代表一台机器。这个按钮是根据Jquery的结果生成的。

目前，我想在一行中添加10个按钮，然后在新行中继续添加它们。另外，我的另一个问题是，我想改变按钮的颜色取决于ajax的结果。

我已经尝试了下面的代码，但它给我的结果是我在下面附加的图像。

图片: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>

我认为else分支中的td元素应该追加到#body tr:last 

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

尝试先创建行....当您到达第10项或最后一项时，添加行并创建新行(如果需要)

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);
    }
});
相关文章：