Zeige JavaScript assoziative Array in HTML-Tabelle mit HTML

-4

Ich muss die Ergebnisse einer Sortierung auf einem assoziativen Array in JavaScript in einer HTML-Tabelle, die nicht mit PHP oder diese Dinge. Die Sortierung funktioniert gut, wie ich in der Konsole sehen kann, aber es zeigt nicht die Tabelle. Hier ist die Quelle so weit, wie ich es habe jetzt:Zeige JavaScript assoziative Array in HTML-Tabelle mit HTML

var array = [{ 
 
    name: 'TK345', 
 
    year: 2011, 
 
    custom: 456, 
 
    colour: 'red' 
 
}, { 
 

 
    name: 'ZJ456', 
 
    year: 2001, 
 
    custom: 96, 
 
    colour: 'black' 
 
}, { 
 
    name: 'AW364', 
 
    year: 1985, 
 
    custom: 001, 
 
    colour: 'cyan' 
 
}, { 
 
    name: 'RT112', 
 
    year: 2012, 
 
    custom: 33, 
 
    colour: 'green' 
 
}, { 
 
    name: 'PO445', 
 
    year: 2012, 
 
    custom: 11, 
 
    colour: 'yellow' 
 
}]; 
 

 
function sortarray(sorter) { 
 

 
    if (array.length < 1) { 
 
    return -1; 
 
    } 
 

 
    if (sorter == "name") { 
 

 
    var byName = array.slice(0); 
 
    var tableout = document.createElement('table'); 
 
    var retval = null; 
 
    byName.sort(function(a, b) { 
 

 
     var x = a.name.toLowerCase(); 
 
     var y = b.name.toLowerCase(); 
 
     retval = x < y ? -1 : x > y ? 1 : 0; 
 

 
     tableout.setAttribute('border', '1'); 
 
     tableout.setAttribute('width', '100%') 
 
     var row = tableout.insertRow(0); 
 
     for (j = 1; j <= 5; j++) { 
 
     row = tableout.insertRow(j - 1); 
 
     for (i = 1; i <= 4; i++) 
 
      var text = document.createTextNode(retval); 
 
     var cell = row.insertCell(i - 1); 
 
     cell.setAttribute('align', 'center') 
 
     cell.appendChild(text); 
 
     } 
 
    }) 
 
    document.getElementById("demo").appendChild(tableout); 
 
    console.log(retval); 
 

 
    } else if (sorter == "year") { 
 

 
    var byDate = array.slice(0); 
 
    var tableout = document.createElement('table'); 
 
    var retval = null; 
 
    byDate.sort(function(a, b) { 
 

 
     retval = a.year - b.year; 
 

 
     tableout.setAttribute('border', '1'); 
 
     tableout.setAttribute('width', '100%') 
 
     var row = tableout.insertRow(0); 
 
     for (j = 1; j <= 5; j++) { 
 
     row = tableout.insertRow(j - 1); 
 
     for (i = 1; i <= 4; i++) 
 
      var text = document.createTextNode(retval); 
 
     var cell = row.insertCell(i - 1); 
 
     cell.setAttribute('align', 'center') 
 
     cell.appendChild(text); 
 
     } 
 
    }) 
 
    document.getElementById("demo").appendChild(tableout); 
 
    console.log(retval); 
 

 
    } else {}; 
 

 
};

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <button onclick="sortarray('name')">Sort by Name</button> 
 
    <button onclick="sortarray('year')">Sort by Year</button> 
 
    <p id="demo">test</p> 
 
</body> 
 
</html>

So ist es nicht zeigen Sie mir etwas in der Tabelle auf der Seite oder in der Konsole.

Irgendwelche Ideen?

Quelle

2016-08-05 Thevagabond

Sie haben vor allem diese Tabelle erstellen Sachen return-Anweisung. – instead

Dachte, um das zurückzugeben, jetzt habe ich es in einer Variablen .... Aktualisierung der Quelle in Frage .. sec – Thevagabond

Ihr Code ist in vielerlei Hinsicht gebrochen:

Sie kehrt in falschen Stellen haben
Sie brauchen nicht zwei verschiedene Funktionen, brauchen Sie nur eine andere Sortierfunktion
etwas haben, tun wie for (var i = 1; i <= 4; i++) und dann i-1 verwenden ist schlecht. Starten von 0 Zählen
Sie können nicht darauf zugreifen mit integer Objekt, müssen Sie die Tasten verwenden (siehe meine innere for)
Sie brauchen nicht else {}
mit Vertiefung Seien Sie vorsichtig, hebt es logische Fehler auch.
Sie müssen die Tabelle innen die Sortierfunktion

ich einige Ihrer Fehler entfernt werden nicht gedruckt, funktioniert diese Funktion:

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<button onclick="sortarray('name')">Sort by Name</button> 
 
<button onclick="sortarray('year')">Sort by Year</button> 
 
<p id="demo">test</p> 
 

 
<script> 
 
var array = [ 
 
{ 
 
    name: 'TK345', 
 
    year: 2011, 
 
    custom: 456, 
 
    colour: 'red' 
 
}, 
 
{ 
 

 
    name: 'ZJ456', 
 
    year: 2001, 
 
    custom: 96, 
 
    colour: 'black' 
 
}, 
 
{    
 
    name: 'AW364', 
 
    year: 1985, 
 
    custom: 001, 
 
    colour: 'cyan' 
 
},  
 
{ 
 
    name: 'RT112', 
 
    year: 2012, 
 
    custom: 33, 
 
    colour: 'green' 
 
}, 
 
{ 
 
    name: 'PO445', 
 
    year: 2012, 
 
    custom: 11, 
 
    colour: 'yellow' 
 
    } 
 
]; 
 

 
function sortarray(sorter) { 
 
    if (array.length < 1) {return -1;} 
 

 
    var elems = array.slice(0); 
 
    elems.sort(function(a, b) { 
 
    if (sorter === 'name') { 
 
     var x = a.name.toLowerCase(); 
 
     var y = b.name.toLowerCase(); 
 
     return x < y ? -1 : x > y ? 1 : 0; 
 
    } 
 

 
    return a.year - b.year; 
 
    }); 
 
    
 
    var tableout = document.createElement('table'); 
 
    tableout.setAttribute('border','1'); 
 
    tableout.setAttribute('width','100%'); 
 
    
 
    var row = tableout.insertRow(0); 
 
    
 
    for (var j=0; j<5; j++) { 
 
    row = tableout.insertRow(j); 
 
    var keys = Object.keys(elems[j]); 
 
    for (var i=0; i < keys.length; i++) { 
 
     var text = document.createTextNode(elems[j][keys[i]]); 
 
     var cell = row.insertCell(i); 
 
     cell.setAttribute('align','center'); 
 
     cell.appendChild(text); 
 
    } 
 
    } 
 
    
 
    document.getElementById("demo").appendChild(tableout); 
 
    console.log(elems); 
 
} 
 

 
</script> 
 

 
</body> 
 
</html>

Quelle

2016-08-05 08:28:56 rpadovani

Wow danke .... Ich werde einen Blick auf diese Quelle .... Ich kow meins war ziemlich durcheinander Entschuldigung dafür. Nun, nur Erfahrung macht dich besser. Also danke für deine Hilfe. – Thevagabond

@Thevagabond sicher, und das ist die Art, wie ich versuchte, Ihre Fehler zu markieren, damit das nächste Mal es besser sein wird :) Jedenfalls, werfen Sie einen Blick auf "Learning Javascript" hier: https://stackoverflow.com/tags/javascript/ info – rpadovani

Danke für die Empfehlung, werde ich tun. – Thevagabond

Wir tun dies, Job mit einer generischen tableMaker Funktion. Der folgende Code generiert eine Tabelle für Sie. Die generische tableMaker-Funktion verwendet ein Array eines Objekts oder ein Array mehrerer Objekte, die im ersten Argument enthalten sind. Alle Objekte sollten dieselben Schlüssel (Eigenschaften) haben, da diese Schlüssel zum Erstellen des Tabellenheaders verwendet werden (wenn das zweite Argument auf "true" gesetzt ist) und die Werte zum Erstellen jeder Zeile verwendet werden. Es wird ein HTML-Tabellentext zurückgegeben.

Außerdem habe ich eine sehr einfache Sortierfunktion hinzugefügt, die die Zeilen nach den Spaltendaten sortiert, wenn Sie auf die entsprechende Kopfzeile klicken. Ab jetzt wird es keine aufsteigenden absteigenden Schalter tun, sondern die Idee geben, wie man sich annähert.

function tableMaker(o,h){ 
 
    var keys = Object.keys(o[0]), 
 
    rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>" 
 
                    : "<" + t + ">" + c + "</" + t + ">"),"<tr>"), 
 
     rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []); 
 
    return "<table>" + rows + "</table>"; 
 
} 
 

 
function sorter(e){ 
 
    tableData.sort((a,b) => a[e.currentTarget.textContent] < b[e.currentTarget.textContent] ? -1 : 1); 
 
    myTable.innerHTML = tableMaker(tableData,true); 
 
    thList = myTable.querySelectorAll("table tr th"); 
 
    for (var th of thList) { 
 
    th.addEventListener("click", sorter); 
 
    th.textContent === e.currentTarget.textContent ? th.classList = "selected_header" 
 
                : th.classList = "header"; 
 
    } 
 
} 
 

 
var tableData = [{name: 'TK345', year: 2011, custom: 456, colour: 'red'}, 
 
       {name: 'ZJ456', year: 2001, custom: 96, colour: 'black'}, 
 
       {name: 'AW364', year: 1985, custom: 001, colour: 'cyan'}, 
 
       {name: 'RT112', year: 2012, custom: 33, colour: 'green'}, 
 
       {name: 'PO445', year: 2012, custom: 11, colour: 'yellow'}], 
 
     myTable = document.getElementById("myTable"), 
 
     thList; 
 

 
myTable.innerHTML = tableMaker(tableData,true); 
 
thList = myTable.querySelectorAll("table tr th"); 
 
    for (var th of thList) { 
 
    th.addEventListener("click", sorter); 
 
    th.classList = "header"; 
 
    }

.header { 
 
     border: 2px solid tomato; 
 
border-radius: 6px; 
 
    background: pink; 
 
} 
 

 
.selected_header { 
 
     border: 2px solid turquoise; 
 
border-radius: 6px; 
 
    background: paleGreen; 
 
}

<div id="myTable"></div>

Quelle

2016-08-05 11:35:38 Redu

Zeige JavaScript assoziative Array in HTML-Tabelle mit HTML

Antwort

Verwandte Themen