將數據按其ID排序到HTML表格jQuery/javaScript

我有一個迭代問題，我試圖解決它幾天。將數據按其ID排序到HTML表格jQuery/javaScript

我有一個jQuery腳本，它從url中獲取JSON對象，然後將其放入數組中。當我有3個不同的表並且腳本將數據放入其中3個時，會發生問題。我試圖通過#id識別進行排序，但它根本不起作用。

這是一個從服務器獲取數據的腳本。 JSON對象是：[{"Date": 20160721, "Failures": 5, "Hostname": "AIX", "Scan policy": "compliance-rhel6-int-prd"}, {"Date": 20160721, "Failures": 1, "Hostname": "Linux", "Scan policy": "compliance-rhel6-int-prd"}]

腳本：

    <script> 
         var url = 'http://jsonobj/_server_data' 
         $.getJSON(url, 
           function (data) { 
            var tr; 
            for (var i = 0; i < data.length; i++) { 
             tr = $('<tr/>'); 
             tr.append("<td>" + data[i].Date + "</td>"); 
             tr.append("<td>" + data[i].Failures + "</td>"); 
             tr.append("<td>" + data[i].Hostname + "</td>"); 
             $('table').append(tr); 
            } 
           }); 
        </script>

我試圖牛逼Ø做的是創建兩個表一個一個AIX Linux和存儲只是系統中的數據。現在相同的數據出現在兩個表中。我試圖通過將$.(#hostname)作爲ID對它進行排序，但它不起作用。

謝謝你的幫助！

來源

2016-07-22 Maltesse

我不知道正確understant你需要什麼，但刪除'$（「表」）追加（TR）'和'寫表= $（「

」）。 table.append（tr）; $（「body」）。append（table）;'這是你在找什麼？ –

回答

只需在頁面上2個表。一個與#AIX的ID和其他與#Linux

HTML的id：

<table id="AIX"></table> 
<table id="Linux"></table>

的Javascript：

<script> 
    var url = 'http://jsonobj/_server_data' 
    $.getJSON(url, 
      function (data) { 
       var tr; 
       for (var i = 0; i < data.length; i++) { 
        tr = $('<tr/>'); 
        tr.append("<td>" + data[i].Date + "</td>"); 
        tr.append("<td>" + data[i].Failures + "</td>"); 
        tr.append("<td>" + data[i].Hostname + "</td>"); 

        // This is where the magic happens 
        $('table#' + data[i].Hostname).append(tr); 
       } 
      }); 
</script>

這樣做，tr元素將僅追加到與主機名ID匹配的表。

來源

2016-07-22 12:59:15

這完美的作品。謝謝！ – Maltesse

這應該做的伎倆：

var AIX = [], Linux = []; 
var url = "http://jsonobj/_server_data"; 
$.getJSON(url, function(data) { 
    data = JSON.parse(data); 
    for(var x in data) { 
    if(data[x].Hostname == "AIX") { 
     AIX[AIX.length] = data[x]; 
    } else if(data[x].Hostname == "Linux") { 
     Linux[Linux.length] = data[x]; 
    } 
    } 
    printTables(); 
}); 

function printTables() { 
    var tableAIX = document.getElementById('tableAIX'); 
    var newAIX = ""; 
    var tableLinux = document.getElementById('tableLinux'); 
    var newLinux = ""; 
    for(var x in AIX) { 
     newAIX += "<tr><td>"+AIX[x].Date+"</td><td>"+AIX[x].Failures+"</td><td>"+AIX[x].Hostname+"</td></tr>"; 
    } 
    for(var x in Linux) { 
     newLinux += "<tr><td>"+Linux[x].Date+"</td><td>"+Linux[x].Failures+"</td><td>"+Linux[x].Hostname+"</td></tr>"; 
    } 
    tableAIX.innerHTML = newAIX; 
    tableLinux.innerHTML = newLinux; 
}

以此爲HTML：

<table id='tableAIX'></table> 
<table id='tableLinux'></table>

來源

2016-07-22 12:57:47 ThijmenDF

你應該把你的代碼改爲通用的代碼 –

謝謝你的答案。我選擇下面的答案是正確的，因爲它被縮短了，適合我的問題。 :) – Maltesse

簡單：迭代表格。

$.getJSON(url, function (data) { 
    var tr; 
    for (var i = 0, $tables = $('table'), c; c = data[i]; i++) { 
     $tr = $('<tr/>'); 
     $tr.append("<td>" + c.Date + "</td>"); 
     $tr.append("<td>" + c.Failures + "</td>"); 
     $tr.append("<td>" + c.Hostname + "</td>"); 
     $tables[i].appendChild($tr[0]); 
    } 
});

來源

2016-07-22 13:05:14 Hydro

相關問題