HTML-Tabelle mit JavaScript sortieren

72

Ich bin auf der Suche nach einer Tabellensortierlösung (in JavaScript), kann aber noch keine passende finden. Ich brauche es nur, um jede Spalte alphabetisch zu sortieren. Es muss keinen Code oder Zahlen ignorieren oder mit Währung arbeiten. Nur ein Klick auf die Spaltenüberschrift wechselt von sortiert az / za.

Kennt jemand eine wirklich einfache Lösung wie diese?

lukeseager
quelle

Antworten:

143

Ich habe gerade eine alte Lösung überarbeitet und dachte, ich würde sie zum ~ 5-jährigen Jubiläum neu gestalten!

  • Einfaches Javascript (ES6)
  • Führt alphanumerische Sortierung durch - aufsteigend und absteigend
  • Funktioniert in Chrome , Firefox , Safari (und IE11 , siehe unten)

Schnelle Erklärung

  1. füge clickallen header ( th) Zellen ein Ereignis hinzu ...
    1. tableFinden Sie für den aktuellen alle Zeilen (außer der ersten) ...
    2. Sortieren Sie die Zeilen nach dem Wert der angeklickten Spalte ...
    3. Fügen Sie die Zeilen in der neuen Reihenfolge wieder in die Tabelle ein.

const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// do the work...
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
    const table = th.closest('table');
    Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
        .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
        .forEach(tr => table.appendChild(tr) );
})));
table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}
<table>
    <tr><th>Country</th><th>Date</th><th>Size</th></tr>
    <tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
    <tr><td><a href=#>spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
    <tr><td><b>Lebanon</b></td><td><a href=#>2002-02-02</a></td><td><b>-17</b></td></tr>
    <tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href=#>100</a></td></tr>
    <tr><td>USA</td><td></td><td>-6</td></tr>
</table>


IE11-Unterstützung (nicht ES6)

Wenn Sie IE11 unterstützen möchten, müssen Sie die ES6-Syntax aufgeben und Alternativen zu Array.fromund verwenden Element.closest.

dh

var getCellValue = function(tr, idx){ return tr.children[idx].innerText || tr.children[idx].textContent; }

var comparer = function(idx, asc) { return function(a, b) { return function(v1, v2) {
        return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
    }(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}};

// do the work...
Array.prototype.slice.call(document.querySelectorAll('th')).forEach(function(th) { th.addEventListener('click', function() {
        var table = th.parentNode
        while(table.tagName.toUpperCase() != 'TABLE') table = table.parentNode;
        Array.prototype.slice.call(table.querySelectorAll('tr:nth-child(n+2)'))
            .sort(comparer(Array.prototype.slice.call(th.parentNode.children).indexOf(th), this.asc = !this.asc))
            .forEach(function(tr) { table.appendChild(tr) });
    })
});
Nick Grealy
quelle
9
Beachten Sie, dass die Anweisung th.parentNode.parentNode fehlschlägt, wenn die Kopfzeile in ein <thead> -Element eingeschlossen ist. Ich würde vorschlagen, "var table = th.closest ('table');" zu verwenden. Beachten Sie, dass Element.closest () in IE11 / Edge nicht implementiert zu sein scheint.
Ed Griebel
10
Ein Kommentar für Neulinge in Javascript wie mich, weil ich viel Zeit verloren habe, um zu verstehen, warum es bei mir nicht funktioniert. Wenn Sie dieses Skript einfach in Ihr HTML-Tag <script> einfügen, geschieht nichts. Sie müssen diese Funktion mit einem Ereignis verknüpfen, um beispielsweise window: window.onload = function () {/ * script aus dieser Antwort * /} zu laden, und dann funktioniert es einwandfrei!
Vladimir
1
@ NickGrealy Danke für den anmutigen Code! Wie heißt diese Bezeichnung:this.asc = !this.asc
krolovolk
1
Gibt es eine Lösung, die Präfixe wie $ oder andere Währungen behandelt?
Kyle Underhill
1
@KyleUnderhill - Entfernen Sie einfach alle Währungszeichen ( $usw.), bevor Sie den Vergleich durchführen -> und die Währungen werden als Zahlen behandelt. Das ,Trennzeichen bedeutet verschiedene Dinge an verschiedenen Orten (dh "Tausend" -Trennzeichen (Australien) gegenüber "Dezimal" -Trennzeichen (Europa)). Ich überlasse Ihnen diese Lösung.
Nick Grealy
77

Ich habe einen Code geschrieben, der eine Tabelle nach einer Zeile sortiert, vorausgesetzt, nur eine <tbody>und Zellen haben keinen Colspan .

function sortTable(table, col, reverse) {
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
        tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
        i;
    reverse = -((+reverse) || -1);
    tr = tr.sort(function (a, b) { // sort rows
        return reverse // `-1 *` if want opposite order
            * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
                .localeCompare(b.cells[col].textContent.trim())
               );
    });
    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}
// sortTable(tableNode, columId, false);

Wenn Sie die oben genannten Annahmen nicht treffen möchten, müssen Sie überlegen, wie Sie sich unter den jeweiligen Umständen verhalten möchten. (zB alles in eins setzen <tbody>oder alle vorhergehenden Colspan- Werte addieren usw.)

Sie können dies dann an jede Ihrer Tabellen anhängen, z. B. unter der Annahme, dass Titel vorhanden sind <thead>

function makeSortable(table) {
    var th = table.tHead, i;
    th && (th = th.rows[0]) && (th = th.cells);
    if (th) i = th.length;
    else return; // if no `<thead>` then do nothing
    while (--i >= 0) (function (i) {
        var dir = 1;
        th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
    }(i));
}

function makeAllSortable(parent) {
    parent = parent || document.body;
    var t = parent.getElementsByTagName('table'), i = t.length;
    while (--i >= 0) makeSortable(t[i]);
}

und dann makeAllSortable Onload aufrufen .


Beispiel Geige davon auf einem Tisch arbeiten.

Paul S.
quelle
Ah, mein Fehler mit dem Verstecktisch. Probieren Sie es jetzt einfach aus. Nur um zu verdeutlichen, würde ich das makeAllSortable()zur Körperbelastung richtig hinzufügen?
lukeseager
Ja, kopieren Sie den Code in seiner jetzigen Form erneut, da ich ihn bearbeitet habe. Stellen Sie außerdem sicher, dass Sie die von mir getroffenen Annahmen verstehen.
Paul S.
@ lucas572 trifft derzeit nur eine Entscheidung basierend auf .textContent.trim()(die sich nicht basierend auf dem Status des Kontrollkästchens usw. ändert). Wenn Sie auf andere Weise entscheiden möchten, bringen Sie ihm bei, wie es geht .sort.
Paul S.
@ Pauls. Vielen Dank, sehr nützlich. Ich habe es in allen Browsern getestet und es hat einwandfrei funktioniert, außer in IE10. Haben Sie eine Idee warum?
user2517028
12
Antworte mir selbst, ich finde in MDN die Verwendung von Optionen, also benutze die numeric: trueeine und du wirst gut mit Zahlen umgehen können, sogar innerhalb von Strings. Ersetzen .localeCompare(b.cells[col].textContent.trim())durch.localeCompare(b.cells[col].textContent.trim(), undefined, {numeric: true})
Fla
26

Die akzeptierte Antwort von Nick Grealy ist großartig, wirkt aber etwas eigenartig, wenn sich Ihre Zeilen innerhalb eines <tbody>Tags befinden (die erste Zeile wird nie sortiert und nach dem Sortieren landen die Zeilen außerhalb des tbody-Tags und verlieren möglicherweise die Formatierung).

Dies ist jedoch eine einfache Lösung:

Nur ändern:

document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
  const table = th.closest('table');
  Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
    .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
    .forEach(tr => table.appendChild(tr) );

zu:

document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
  const table = th.closest('table');
  const tbody = table.querySelector('tbody');
  Array.from(tbody.querySelectorAll('tr'))
    .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
    .forEach(tr => tbody.appendChild(tr) );
jedwards
quelle
8

Es ist viel mehr als "nur sortieren", aber dataTables.net macht das, was Sie brauchen. Ich benutze es täglich und ist gut unterstützt und sehr schnell (erfordert jQuery)

http://datatables.net/

DataTables ist ein Plug-In für die jQuery Javascript-Bibliothek. Es ist ein hochflexibles Tool, das auf den Grundlagen der progressiven Verbesserung basiert und jeder HTML-Tabelle erweiterte Interaktionssteuerelemente hinzufügt.

Google Visualisierungen ist eine weitere Option, erfordert jedoch etwas mehr Setup als dataTables, erfordert jedoch KEIN bestimmtes Framework / keine bestimmte Bibliothek (außer google.visualizations):

http://code.google.com/apis/ajax/playground/?type=visualization#table

Und es gibt noch andere Möglichkeiten ... insbesondere, wenn Sie eines der anderen JS-Frameworks verwenden. Dojo, Prototype usw. verfügen alle über verwendbare "Tabellenerweiterungs" -Plugins, die bei minimaler Tabellensortierfunktionalität Funktionen bieten. Viele bieten mehr, aber ich werde es noch einmal wiederholen ... Ich habe noch keinen gefunden, der so leistungsfähig und SCHNELL ist wie datatables.net.

BLSully
quelle
hmm ich werde mir das mal ansehen. Ich hatte zwar auf eine Javascript-Lösung gehofft, aber hey, wenn das funktioniert! Meine einzige Sorge bei einigen ist, dass sie verwirrt sind, wenn HTML in der Tabelle ist. Wird dies nur das HTML durchlesen und es ist ihnen egal, was es sieht? Oder wird es versuchen, es zu ignorieren?
lukeseager
Technisch gesehen ist es JavaScript. jQuery ist nichts anderes als ein JS-Framework ... keine Magie. DataTables ist ziemlich gut im Umgang mit HTML, jedoch müssen Sie möglicherweise einen benutzerdefinierten Sortierer schreiben (dokumentiert auf seiner Website)
BLSully
4
@BLSully: Was ist mit listjs.com ? Ich habe gelesen, dass Datentabellen ziemlich klobig waren, ein großer Kanon für das Schießen kleiner Vögel in einigen Fällen
Adrien Be
@AdrienBe: Netter Vorschlag! Ich bin dem noch nie begegnet. Muss sehen, wie es mit wirklich großen Datenmengen funktioniert. Ich habe zuvor mehr als 15.000 Zeilen in DataTables ausgeführt und die Leistung bleibt in modernen Browsern akzeptabel. Aber ich werde definitiv zustimmen, dass DataTables für einige Probleme ein zu großer Hammer sein kann. ListJS scheint eine großartige Alternative zu sein (und lässt Sie auch andere HTML-
Dateien
@ BLSully: Ich habe es heute verwendet und es scheint in Ordnung zu sein. Hier ist ein sehr einfaches Beispiel, um Ihnen den Einstieg
Adrien Be
7

Die beste Möglichkeit, HTML-Tabellen mit Javascript zu sortieren, ist die folgende Funktion.

Übergeben Sie einfach die ID der Tabelle, die Sie sortieren möchten, und die Spaltennummer in der Zeile. Es wird davon ausgegangen, dass die Spalte, die Sie sortieren, numerisch ist oder Zahlen enthält. Sie wird durch Regex ersetzt, um die Zahl selbst zu erhalten (ideal für Währungen und andere Zahlen mit Symbolen).

function sortTable(table_id, sortColumn){
    var tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0);
    var rowData = tableData.getElementsByTagName('tr');            
    for(var i = 0; i < rowData.length - 1; i++){
        for(var j = 0; j < rowData.length - (i + 1); j++){
            if(Number(rowData.item(j).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, "")) < Number(rowData.item(j+1).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, ""))){
                tableData.insertBefore(rowData.item(j+1),rowData.item(j));
            }
        }
    }
}

Am Beispiel:

$(function(){
    // pass the id and the <td> place you want to sort by (td counts from 0)
    sortTable('table_id', 3);
});
AfikDeri
quelle
Ich mag diese Lösung, aber ist es nicht schneller, die sort () zu verwenden?
Martin Zvarík
Warum müssen Sie eine anonyme Funktion in ein jQuery-Objekt einfügen, um Ihre Funktion aufzurufen? Könnten Sie nicht einfach sortTable('table_id', 3)direkt anrufen ?
Payne
4

Sie könnten mit einem JSON-Array und der sortFunktion umgehen . Es ist eine ziemlich einfach zu verwaltende Struktur (z. B. Sortieren).

Ungetestet, aber hier ist die Idee. Dies würde eine Mehrfachreihenfolge und eine sequentielle Reihenfolge unterstützen, wenn Sie ein Array übergeben, in dem Sie die Spalten in der Reihenfolge platzieren, in der sie sortiert werden sollen.

var DATA_TABLE = {
    {name: 'George', lastname: 'Blarr', age:45},
    {name: 'Bob', lastname: 'Arr', age: 20}
    //...
};

function sortDataTable(arrayColNames, asc) { // if not asc, desc
    for (var i=0;i<arrayColNames.length;i++) {
        var columnName = arrayColNames[i];
        DATA_TABLE = DATA_TABLE.sort(function(a,b){
            if (asc) {
                return (a[columnName] > b[columnName]) ? 1 : -1;
            } else {
                return (a[columnName] < b[columnName]) ? 1 : -1;
            }
        });
    }
}

function updateHTMLTable() {
    // update innerHTML / textContent according to DATA_TABLE
    // Note: textContent for firefox, innerHTML for others
}

Stellen wir uns nun vor, Sie müssen nach Nachname, dann nach Name und schließlich nach Alter bestellen.

var orderAsc = true;
sortDataTable(['lastname', 'name', 'age'], orderAsc);

Es sollte zu etwas führen wie:

{name: 'Jack', lastname: 'Ahrl', age: 20},
{name: 'Jack', lastname: 'Ahrl', age: 22},
//...
Frederik.L
quelle
Ich habe eine ziemlich lange Tabelle mit ~ 200 Zeilen und wächst. Denken Sie, dass diese Methode schneller wäre als die anderen Antworten?
Posfan12
4

Hier ist ein vollständiges Beispiel mit reinem JavaScript. Der zum Sortieren verwendete Algorithmus ist im Grunde BubbleSort . Hier ist eine Geige .

   <!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">

<script type="text/javascript">
    function sort(ascending, columnClassName, tableId) {
        var tbody = document.getElementById(tableId).getElementsByTagName(
                "tbody")[0];
        var rows = tbody.getElementsByTagName("tr");

        var unsorted = true;

        while (unsorted) {
            unsorted = false

            for (var r = 0; r < rows.length - 1; r++) {
                var row = rows[r];
                var nextRow = rows[r + 1];

                var value = row.getElementsByClassName(columnClassName)[0].innerHTML;
                var nextValue = nextRow.getElementsByClassName(columnClassName)[0].innerHTML;

                value = value.replace(',', '.'); // in case a comma is used in float number
                nextValue = nextValue.replace(',', '.');

                if (!isNaN(value)) {
                    value = parseFloat(value);
                    nextValue = parseFloat(nextValue);
                }

                if (ascending ? value > nextValue : value < nextValue) {
                    tbody.insertBefore(nextRow, row);
                    unsorted = true;
                }
            }
        }
    };
</script>
</head>
<body>
    <table id="content-table">
        <thead>
            <tr>
                <th class="id">ID <a
                    href="javascript:sort(true, 'id', 'content-table');">asc</a> <a
                    href="javascript:sort(false, 'id', 'content-table');">des</a>
                </th>
                <th class="country">Country <a
                    href="javascript:sort(true, 'country', 'content-table');">asc</a> <a
                    href="javascript:sort(false, 'country', 'content-table');">des</a>
                </th>
                <th class="some-fact">Some fact <a
                    href="javascript:sort(true, 'some-fact', 'content-table');">asc</a>
                    <a href="javascript:sort(false, 'some-fact', 'content-table');">des</a>
                <th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="id">001</td>
                <td class="country">Germany</td>
                <td class="some-fact">16.405</td>
            </tr>
            <tr>
                <td class="id">002</td>
                <td class="country">France</td>
                <td class="some-fact">10.625</td>
            </tr>
            <tr>
                <td class="id">003</td>
                <td class="country">UK</td>
                <td class="some-fact">15.04</td>
            </tr>
            <tr>
                <td class="id">004</td>
                <td class="country">China</td>
                <td class="some-fact">13.536</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Sie können die Quelle auch hier einsehen : https://github.com/wmentzel/table-sort

Willi Mentzel
quelle
3

Sortieren von Tabellenzeilen nach Zellen. 1. Etwas einfacher und hat einige Funktionen. 2. Unterscheiden Sie beim Sortieren zwischen 'Nummer' und 'Zeichenfolge'. 3. Fügen Sie einen Schalter hinzu, um nach ASC, DESC zu sortieren

var index;      // cell index
var toggleBool; // sorting asc, desc 
function sorting(tbody, index){
    this.index = index;
    if(toggleBool){
        toggleBool = false;
    }else{
        toggleBool = true;
    }

    var datas= new Array();
    var tbodyLength = tbody.rows.length;
    for(var i=0; i<tbodyLength; i++){
        datas[i] = tbody.rows[i];
    }

    // sort by cell[index] 
    datas.sort(compareCells);
    for(var i=0; i<tbody.rows.length; i++){
        // rearrange table rows by sorted rows
        tbody.appendChild(datas[i]);
    }   
}

function compareCells(a,b) {
    var aVal = a.cells[index].innerText;
    var bVal = b.cells[index].innerText;

    aVal = aVal.replace(/\,/g, '');
    bVal = bVal.replace(/\,/g, '');

    if(toggleBool){
        var temp = aVal;
        aVal = bVal;
        bVal = temp;
    } 

    if(aVal.match(/^[0-9]+$/) && bVal.match(/^[0-9]+$/)){
        return parseFloat(aVal) - parseFloat(bVal);
    }
    else{
          if (aVal < bVal){
              return -1; 
          }else if (aVal > bVal){
                return 1; 
          }else{
              return 0;       
          }         
    }
}

Unten ist ein HTML-Beispiel

            <table summary="Pioneer">

                <thead>
                    <tr>
                        <th scope="col"  onclick="sorting(tbody01, 0)">No.</th>
                        <th scope="col"  onclick="sorting(tbody01, 1)">Name</th>
                        <th scope="col"  onclick="sorting(tbody01, 2)">Belong</th>
                        <th scope="col"  onclick="sorting(tbody01, 3)">Current Networth</th>
                        <th scope="col"  onclick="sorting(tbody01, 4)">BirthDay</th>
                        <th scope="col"  onclick="sorting(tbody01, 5)">Just Number</th>
                    </tr>
                </thead>

                <tbody id="tbody01">
                    <tr>
                        <td>1</td>
                        <td>Gwanshic Yi</td>
                        <td>Gwanshic Home</td>
                        <td>120000</td>
                        <td>1982-03-20</td>
                        <td>124,124,523</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Steve Jobs</td>
                        <td>Apple</td>
                        <td>19000000000</td>
                        <td>1955-02-24</td>
                        <td>194,523</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Bill Gates</td>
                        <td>MicroSoft</td>
                        <td>84300000000</td>
                        <td>1955-10-28</td>
                        <td>1,524,124,523</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Larry Page</td>
                        <td>Google</td>
                        <td>39100000000</td>
                        <td>1973-03-26</td>
                        <td>11,124,523</td>
                    </tr>
                </tbody>
            </table>

Gwanshic
quelle
1

Ein weiterer Ansatz zum Sortieren von HTML-Tabellen. (basierend auf W3.JS HTML Sort )

var collection = [{
  "Country": "France",
  "Date": "2001-01-01",
  "Size": "25",
}, {
  "Country": "spain",
  "Date": "2005-05-05",
  "Size": "",
}, {
  "Country": "Lebanon",
  "Date": "2002-02-02",
  "Size": "-17",
}, {
  "Country": "Argentina",
  "Date": "2005-04-04",
  "Size": "100",
}, {
  "Country": "USA",
  "Date": "",
  "Size": "-6",
}]

for (var j = 0; j < 3; j++) {
  $("#myTable th:eq(" + j + ")").addClass("control-label clickable");
  $("#myTable th:eq(" + j + ")").attr('onClick', "w3.sortHTML('#myTable', '.item', 'td:nth-child(" + (j + 1) + ")')");
}

$tbody = $("#myTable").append('<tbody></tbody>');

for (var i = 0; i < collection.length; i++) {
  $tbody = $tbody.append('<tr class="item"><td>' + collection[i]["Country"] + '</td><td>' + collection[i]["Date"] + '</td><td>' + collection[i]["Size"] + '</td></tr>');
}
.control-label:after {
  content: "*";
  color: red;
}

.clickable {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>

<table id="myTable" class="w3-table-all">
  <thead>
    <tr>
      <th>Country</th>
      <th>Date</th>
      <th>Size</th>
    </tr>
  </thead>
</table>

Penny Liu
quelle
0

Falls Ihre Tabelle nicht ths, sondern nur tds enthält (einschließlich Überschriften), können Sie Folgendes versuchen, das auf der obigen Antwort von Nick Grealy basiert:

const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// do the work...
document.querySelectorAll('tr:first-child td').forEach(td => td.addEventListener('click', (() => {
    const table = td.closest('table');
    Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
        .sort(comparer(Array.from(td.parentNode.children).indexOf(td), this.asc = !this.asc))
        .forEach(tr => table.appendChild(tr) );
})));
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto');

*{
  font-family: 'Roboto', sans-serif;
  text-transform:capitalize;
  overflow:hidden;
  margin: 0 auto;
  text-align:left;
}

table {
	color:#666;
	font-size:12px;
	background:#124;
	border:#ccc 1px solid;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
  border-collapse: collapse;
  width: 100%;
}

table td {
	padding:10px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
  width: 6.9in;
}

table tbody tr:first-child td
{
	background: #124!important;
  color:#fff;
}

table tbody tr th
{
  padding:10px;
  border-left: 1px solid #e0e0e0;
	background: #124!important;
  color:#fff;
}
<table>
        <tr><td>Country</td><td>Date</td><td>Size</td></tr>
        <tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
        <tr><td>spain</td><td>2005-05-05</td><td></td></tr>
        <tr><td>Lebanon</td><td>2002-02-02</td><td><b>-17</b></td></tr>
        <tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
        <tr><td>USA</td><td></td><td>-6</td></tr>
    </table>

Datacrawler
quelle
0

Sortieren der HTML-Tabellenspalte beim Laden der Seite

var table = $('table#all_items_table');
var rows = table.find('tr:gt(0)').toArray().sort(comparer(3));
for (var i = 0; i < rows.length; i++) {
    table.append(rows[i])
}
function comparer(index) {
    return function (a, b) {
        var v1= getCellValue(a, index),
        v2= getCellValue(b, index);
        return $.isNumeric(v2) && $.isNumeric(v1) ? v2 - v1: v2.localeCompare(v1)
    }
}


function getCellValue(row, index) {
    return parseFloat($(row).children('td').eq(index).html().replace(/,/g,'')); //1234234.45645->1234234
}

Geben Sie hier die Bildbeschreibung ein

Rashid Khitilov
quelle
0

Ich habe den Code aus einem der Beispiele hier bearbeitet, um jquery zu verwenden. Es ist immer noch nicht 100% jquery. Irgendwelche Gedanken zu den zwei verschiedenen Versionen, wie sind die Vor- und Nachteile der einzelnen ?

function column_sort() {
    getCellValue = (tr, idx) => $(tr).find('td').eq( idx ).text();

    comparer = (idx, asc) => (a, b) => ((v1, v2) => 
        v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
        )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
    
    table = $(this).closest('table')[0];
    tbody = $(table).find('tbody')[0];

    elm = $(this)[0];
    children = elm.parentNode.children;
    Array.from(tbody.querySelectorAll('tr')).sort( comparer(
        Array.from(children).indexOf(elm), table.asc = !table.asc))
        .forEach(tr => tbody.appendChild(tr) );
}

table.find('thead th').on('click', column_sort);
Daniel Huckson
quelle
-1

<!DOCTYPE html>
<html>
<head>
<style>
  table, td, th {
    border: 1px solid;
    border-collapse: collapse;
  }
  td , th {
    padding: 5px;
    width: 100px;
  }
  th {
    background-color: lightgreen;
  }
</style>
</head>
<body>

<h2>JavaScript Array Sort</h2>

<p>Click the buttons to sort car objects on age.</p>

<p id="demo"></p>

<script>
var nameArrow = "", yearArrow = "";
var cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];
yearACS = true;
function sortYear() {
  if (yearACS) {
    nameArrow = "";
    yearArrow = "🔽";
    cars.sort(function(a,b) {
      return a.year - b.year;
    });
    yearACS = false;
  }else {
    nameArrow = "";
    yearArrow = "🔼";
    cars.sort(function(a,b) {
      return b.year - a.year;
    });
    yearACS = true;
  }
  displayCars();
}
nameACS = true;
function sortName() {
  if (nameACS) {
    nameArrow = "🔽";
    yearArrow = "";
    cars.sort(function(a,b) {
      x = a.type.toLowerCase();
      y = b.type.toLowerCase();
      if (x > y) {return 1;}
      if (x < y) {return -1};
      return 0;
    });
    nameACS = false;
  } else {
    nameArrow = "🔼";
    yearArrow = "";
    cars.sort(function(a,b) {
      x = a.type.toUpperCase();
      y = b.type.toUpperCase();
      if (x > y) { return -1};
      if (x <y) { return 1 };
      return 0;
    });
    nameACS = true;
  }
  displayCars();
}

displayCars();

function displayCars() {
  var txt = "<table><tr><th onclick='sortName()'>name " + nameArrow + "</th><th onclick='sortYear()'>year " + yearArrow + "</th><tr>";
  for (let i = 0; i < cars.length; i++) {
    txt += "<tr><td>"+ cars[i].type + "</td><td>" + cars[i].year + "</td></tr>";
  }
  txt += "</table>";
  document.getElementById("demo").innerHTML = txt;
}

</script>

</body>
</html>

Mehran Shagerdi
quelle
Ein Link zu einer Lösung ist willkommen, aber stellen Sie sicher, dass Ihre Antwort ohne sie nützlich ist: Fügen Sie dem Link einen Kontext hinzu, damit Ihre Mitbenutzer eine Vorstellung davon haben, was es ist und warum es dort ist, und zitieren Sie dann den relevantesten Teil der Seite, die Sie verwenden. erneutes Verknüpfen mit, falls die Zielseite nicht verfügbar ist. Antworten, die kaum mehr als ein Link sind, können gelöscht werden.
Steve