Hinzufügen einer Zeile und Sortieren von Tabelle mit JavaScript

Question

Ich stoße auf ein sehr kleines Problem, das mehr als zwei Stunden dauerte.

Ich möchte eine Zeile in eine HTML-Tabelle einfügen und dann in aufsteigender Reihenfolge sortieren. Ich habe this answer angesehen und dachte, dass ich diese einfache Aufgabe arbeiten kann, aber in Vene.

Hier ist meine kleine Form und Tabelle:

function myFunction(name, status) { 
    var table = document.getElementById('myTable').getElementsByTagName('tbody')[0]; 
    var row = table.insertRow(0); 
    var cell1 = row.insertCell(0); 
    var cell2 = row.insertCell(1); 
    cell1.innerHTML = name; 
    cell2.innerHTML = status; 

    // The following code should sort the table. 
    var tbody = $('#mytable').find('tbody'); 
    tbody.find('tr').sort(function (a, b) { 
     return $('td:first', a).text().localeCompare($('td:first', b).text()); 
    }).appendTo(tbody); 
} 

Bitte beachten Sie, dass eine Zeile in der Tabelle Hinzufügen funktioniert gut, es kommt noch hinzu,:

Name: <input type="text" name="name" id="name"><br> 
Status: <input type="text" name="status" id="status">><br> 
<button onclick="myFunction(document.getElementsByName('name')[0].value,document.getElementsByName('status')[0].value)">Click</button><br><br> 
<table id="myTable"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Status</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Doe, John</td> 
      <td>Approved</td> 
     </tr> 
     <tr> 
      <td>aaa, John</td> 
      <td>Approved</td> 
     </tr> 
    </tbody> 
</table> 

Meine Inline-JavaScript-Funktion wie folgt aussieht es nach oben.

Es gibt keine Konsolenfehler. Der Code, der (anscheinend) die Tabelle sortieren sollte, tut nichts. Ich habe die Teilmenge von meinem HTML here on Fiddle, und ja das funktioniert gut.

---

Ich weiß über jQuery tablesorter Plugin aber nicht brauchen, es zu benutzen.

Answer 1

Dieser Selektor:

$('#mytable') 

... ist falsch. Die ID Ihrer Tabelle lautet myTable, und die IDs unterscheiden zwischen Groß- und Kleinschreibung. Here's a working version of your code mit diesem Fix.