Question

我一直致力于使用按钮获取仪表板，每个按钮代表一台机器。根据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>

Answer 1

我认为else分支中的double get_val()元素会附加到get_val("foo")

td

Answer 2

首先尝试创建行....当你到达第十个项目或最后一个项目追加行并创建新行（如果需要）

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);
    }
});

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

2 个答案: