使用JavaScript添加行和排序表

Question

我遇到了一个很小的问题，已花费了两个多小时。

我想要的是在HTML表中插入一行，然后按升序对其进行排序。 我已经看过这个答案，并认为我可以使这个简单的任务正常运行，但有一定的道理。

这是我的小表格和表格：

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>

我的内联JavaScript函数如下所示：

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

请注意，在表格中添加一行可以正常工作，只需将其添加到顶部即可。

没有控制台错误。 （显然）应该对表进行排序的代码没有任何作用。 我在Fiddle上有 HTML的子集，是的，它工作正常。

---

我知道jQuery tablesorter插件，但不需要使用它。

Answer 1

该选择器：

$('#mytable')

...是不正确的。 表的ID为myTable ，并且ID区分大小写。 这是带有该修复程序的代码的有效版本 。