JQuery .appendTo() 多次添加行

Question

有点奇怪的问题，但我不知道如何解决它。

在下面的代码中，我试图根据点击的行标题对表格的所有元素进行排序。

起始 HTML：

<table id="PracticeTable" class="col-md-10 col-md-offset-2">
<tr id="Column Names">
    <td class="ClientID col-xs-1">Client ID</td>
    <td class="ClientName col-xs-1">Client Name</td>
    <td class="PracticeID col-xs-1">Practice</td>
</tr>
@for (int i = 0; i < ViewBag.ClientDatabase.getDatabase().Count; i++)
{
    @:<tr class="DataRow">
        <td class="ClientID col-xs-1" data-name="@ViewBag.ClientDatabase.getByIndex(i).Id">@ViewBag.ClientDatabase.getByIndex(i).Id</td>
        <td class="ClientName col-md-2 col-xs-1" data-name="@ViewBag.ClientDatabase.getByIndex(i).getClientName">@ViewBag.ClientDatabase.getByIndex(i).getClientName</td>
        <td class="PracticeIDs col-xs-1" data-name="@ViewBag.ClientDatabase.getByIndex(i).getPracticeID">@ViewBag.ClientDatabase.getByIndex(i).getPracticeID</td>
        <td class="EditButtons col-xs-1" data-bind="visible: editVisible"><a href="~/Clients/Edit?clientId=@i">Edit</a></td>
    @:</tr> 
}

其中一种点击功能的示例：

jQuery(document).ready(function () {
    $(".ClientName").click(function () {
        alert("Name Clicked");
        var clients = $(".DataRow");
        var compareLine = $(clients).children(".ClientName");

        compareLine.sort(function (a, b) {
            var an = $(a).attr("data-name");
            var bn = $(b).attr("data-name");
            alert(an + " " + bn);

            if (an > bn) {
                return 1;
            }
            if (an < bn) {
                return -1;
            }
            return 0;
        });
        compareLine.detach().appendTo(clients);
    });
});

当我尝试附加上述行时，客户端名称中的名称出现在每一行中。有什么我想念的吗？我试图循环遍历 compareLine 中的数据以单独添加它们，但我无法弄清楚。

编辑：从未完全删除的修复尝试中删除重复代码。

Answer 1

如果你想对行进行排序，我认为你只需要做一个小改动：

jQuery(document).ready(function () {
    $(".ClientName").click(function () {
        alert("Name Clicked");
        var clients = $(".DataRow");

        clients.sort(function(a, b) {
            var an = $(a).children(".ClientName").attr("data-name");
            var bn = $(b).children(".ClientName").attr("data-name");
            alert(an + " " + bn);

            if (an > bn) {
                return 1;
            }
            if (an < bn) {
                return -1;
            }
            return 0;
        });

        clients.detach().appendTo("#PracticeTable");
    });
});

似乎您的排序功能旨在处理行，但您正在对列的集合进行排序。