Aggiunta di una riga e tabella di ordinamento utilizzando JavaScript

Question

Ho riscontrato un problema molto piccolo che ha richiesto più di due ore.

Quello che voglio è inserire una riga in una tabella HTML e quindi ordinarla in ordine crescente. Ho guardato a this answer e ho pensato che avrei potuto ottenere questo semplice compito di lavoro, ma in vena.

Qui è la mia piccola forma e la tabella:

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> 

mio JavaScript inline funzione è simile al seguente:

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

prega di notare che l'aggiunta di una riga alla tabella funziona bene, si aggiunge solo fino in cima.

Ci sono errori di console no. Il codice che (apparentemente) dovrebbe ordinare la tabella non fa nulla. Ho il sottoinsieme del mio codice HTML here on Fiddle e sì che funziona correttamente.

---

So di jQuery tablesorter plug-in, ma non hanno bisogno di usarlo.

Answer 1

Questo selettore:

$('#mytable') 

... non è corretto. L'ID del tuo tavolo è myTable e gli ID fanno distinzione tra maiuscole e minuscole. Here's a working version of your code con quella correzione.