Sortieren von Daten in die HTML-Tabellen nach ihrer ID jQuery/javaScript

Ich habe ein Iteresting-Problem und ich habe versucht, es seit Tagen zu lösen.Sortieren von Daten in die HTML-Tabellen nach ihrer ID jQuery/javaScript

Ich habe ein jQuery-Skript, das JSON-Objekt von der URL nimmt und es dann in das Array einfügt. Das Problem tritt auf, wenn ich 3 verschiedene Tabellen habe und das Skript die Daten in 3 von ihnen legt. Ich habe versucht, es durch #id-Erkennung zu sortieren, aber es funktionierte überhaupt nicht.

Dies ist ein Skript, das Daten vom Server übernimmt. Das JSON-Objekt ist: [{"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:

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

Was ich t o Ich versuche nur tun, ist erstellen zwei Tabellen eine für AIX eine für Linux und speichern die Daten für diese Systeme. Im Moment erscheinen dieselben Daten in zwei Tabellen. Ich wollte es sortieren, indem ich $.(#hostname) als ID bekam, aber es hat nicht funktioniert.

Vielen Dank für Ihre Hilfe!

Quelle

2016-07-22 Maltesse

Ich bin nicht sicher richtig understant, was Sie brauchen, aber entfernen '$ ("table") anhängen (tr)' und schreiben 'table = $ ("

."); table.append (tr); $ ("body"). append (table); 'es ist was du suchst? –

Antwort

haben nur 2 Tabellen auf der Seite. Eine mit der ID von #AIX und andererseits mit der ID von #Linux

HTML:

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

dies tun, werden die tr Elemente nur angehängt werden zu der Tabelle, die der ID des Hostnamens entspricht.

Quelle

2016-07-22 12:59:15

Das funktioniert perfekt. Vielen Dank! – Maltesse

Dies sollte den Trick:

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

Mit diesem als HTML:

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

Quelle

2016-07-22 12:57:47 ThijmenDF

sollten Sie Ihren Code für allgemeine Verwendung optimieren –

Vielen Dank für die Antwort. Ich habe die Antwort unten als richtig gewählt, weil sie kurzgeschlossen ist und besser zu meinem Problem passt. :) – Maltesse

Einfach: iterieren Sie die Tabellen.

$.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]); 
    } 
});

Quelle

2016-07-22 13:05:14 Hydro

Verwandte Themen