Question

我遇到了一个非常小的问题，花了两个多小时。

我想要的是在HTML表格中插入一行，然后按升序对其进行排序。我看了this answer，并认为我可以让这个简单的任务正常工作，但不过是这样。

这是我的小表格和表格：

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

请注意，在表格中添加一行效果很好，只是将其添加到顶部。

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

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

Answer 1

这个选择器：

$('#mytable')

...不正确。您的表格ID为myTable，ID区分大小写。 Here's a working version of your code使用该修复程序。

使用JavaScript

1 个答案: