在指定的列數添加後添加新行javascript

我一直在使用按鈕獲取儀表板，每個按鈕將代表一臺機器。這些按鈕是根據Jquery結果生成的。在指定的列數添加後添加新行javascript

目前，我想在一行中添加10個按鈕，然後繼續將它們添加到新行中。另外，我的另一個問題是，我想改變按鈕的顏色取決於ajax的結果。

我試過下面的代碼，但它給了我作爲一個結果，我已經附在下面的圖像。

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

（對不起，不能發佈圖片，因爲我是新來的＃1）

$(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

我覺得在else分支展會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

，如果你沒有第一TR在#body開始，你應該改變代碼 – amow

你是完全正確的！現在它每行僅顯示10個按鈕，但是，它會添加兩次新按鈕，如下所示：http://i67.tinypic.com/2ngrdbc.png。另外，你知道爲什麼它不取決於jQuery中'lastCommunication'的值嗎？ – 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

回答

相關問題