javascript - 按字母顺序对表格行进行排序

Question

我正在编写 JQuery 脚本以在表中添加行。我想按字母顺序对文本进行排序，例如 A、B、C、D、E 等。

当我尝试这个时:

var mylist = $('#tcM');
var listitems = mylist.find('tr');
listitems.sort(function(a, b) {
    return $(a).find('.alC').text().toUpperCase().localeCompare($(b).find('.alC').text().toUpperCase());
});

它不会按字母顺序对数据进行排序，因为它会显示如下:

test1
test2
test new folder
test4

应该是:

test1
test2
test4
test new folder

我也尝试过这个:

$('#tcM .tBM').sort(sort_folder1).appendTo('.tBM');
function sort_folder1(a, b) {
    return ($(b).text()) < ($(a).text()) ? 1 : -1;
}

完整代码:

folder_html = "<tr id='"+unique_id+"' class='To' style='margin-top: 50px;'><td class='alT' style='width: 90%;'><div class='Zsjd8d' act='s'><div id='mMI' style='background-image: url(https://www.gstatic.com/images/icons/material/system/1x/more_vert_black_20dp.png);background-position: center;background-repeat: no-repeat;background-size: 20px;width: 20px;height: 20px;display: flex;margin-left: 1px; /* vertical-align: middle; */float: left;' data-toggle='tooltip' data-placement='bottom' title='' data-original-title='More'></div><i style='margin-top: -1px;margin-left: 11px;display: inline-block;' class='folder_icon'></i><div class='alC'>"+new_folder+"</div></div></td><td class='alQ'><div id='edit_folder' class='edit_icon' style='float: left;margin-left: 1px;margin-top: 2px;display: inline-block;' data-toggle='tooltip' data-placement='bottom' title='Edit Folder'></div><div id='delete_folder' class='trash_icon' style='display: inline-block;margin-left: 14px;margin-top: 0px;' data-toggle='tooltip' data-placement='bottom' title='Delete Folder'></div></div></td></tr>";
$('#tcM').append(folder_html);

HTML:

<table id="tcM" class="table table-inbox table-hover" style="width: 98%; border: 1px solid #d3d3d3;">
<tbody class="tBM" style="display: table-row-group;"><tr id="2T" class="To" style="margin-top: 50px;">
<td class="alT" style="width: 90%;"><div class="Zsjd8d" act="s"><div id="markMore_img" style="background-image: url(https://www.gstatic.com/images/icons/material/system/1x/more_vert_black_20dp.png);background-position: center;background-repeat: no-repeat;background-size: 20px;width: 20px;height: 20px;display: flex;margin-left: 1px; /* vertical-align: middle; */float: left;" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="More"></div><i style="margin-top: -1px;margin-left: 11px;display: inline-block;" class="folder_icon"></i><div class="alC">test1</div></div></td>
<td class="alQ"><div id="edit_folder" class="edit_icon" style="float: left;margin-left: 1px;margin-top: 2px;display: inline-block;" data-toggle="tooltip" data-placement="bottom" title="Edit Folder"></div><div id="delete_folder" class="trash_icon" style="display: inline-block;margin-left: 14px;margin-top: 0px;" data-toggle="tooltip" data-placement="bottom" title="Delete Folder"></div></td></tr>
<tr id="hj" class="To" style="margin-top: 50px;"><td class="alT" style="width: 90%;"><div class="Zsjd8d" act="s"><div id="markMore_img" style="background-image: url(more_vert_black_20dp.png);background-position: center;background-repeat: no-repeat;background-size: 20px;width: 20px;height: 20px;display: flex;margin-left: 1px; /* vertical-align: middle; */float: left;" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="More"></div><i style="margin-top: -1px;margin-left: 11px;display: inline-block;" class="folder_icon"></i><div class="alC">test2</div></div></td>
<td class="alQ"><div id="edit_folder" class="edit_icon" style="float: left;margin-left: 1px;margin-top: 2px;display: inline-block;" data-toggle="tooltip" data-placement="bottom" title="Edit Folder"></div><div id="delete_folder" class="trash_icon" style="display: inline-block;margin-left: 14px;margin-top: 0px;" data-toggle="tooltip" data-placement="bottom" title="Delete Folder"></div></td></tr>
<tr id="It" class="To" style="margin-top: 50px;"><td class="alT" style="width: 90%;"><div class="Zsjd8d" act="s"><div id="markMore_img" style="background-image: url(https://www.gstatic.com/images/icons/material/system/1x/more_vert_black_20dp.png);background-position: center;background-repeat: no-repeat;background-size: 20px;width: 20px;height: 20px;display: flex;margin-left: 1px; /* vertical-align: middle; */float: left;" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="More"></div><i style="margin-top: -1px;margin-left: 11px;display: inline-block;" class="folder_icon"></i><div class="alC">test new folder</div></div></td>
<td class="alQ"><div id="edit_folder" class="edit_icon" style="float: left;margin-left: 1px;margin-top: 2px;display: inline-block;" data-toggle="tooltip" data-placement="bottom" title="Edit Folder"></div><div id="delete_folder" class="trash_icon" style="display: inline-block;margin-left: 14px;margin-top: 0px;" data-toggle="tooltip" data-placement="bottom" title="Delete Folder"></div></td></tr>
<tr id="d5" class="To" style="margin-top: 50px;"><td class="alT" style="width: 90%;"><div class="Zsjd8d" act="s"><div id="markMore_img" style="background-image: url(https://www.gstatic.com/images/icons/material/system/1x/more_vert_black_20dp.png);background-position: center;background-repeat: no-repeat;background-size: 20px;width: 20px;height: 20px;display: flex;margin-left: 1px; /* vertical-align: middle; */float: left;" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="More"></div><i style="margin-top: -1px;margin-left: 11px;display: inline-block;" class="folder_icon"></i><div class="alC">test4</div></div></td>
<td class="alQ"><div id="edit_folder" class="edit_icon" style="float: left;margin-left: 1px;margin-top: 2px;display: inline-block;" data-toggle="tooltip" data-placement="bottom" title="Edit Folder"></div><div id="delete_folder" class="trash_icon" style="display: inline-block;margin-left: 14px;margin-top: 0px;" data-toggle="tooltip" data-placement="bottom" title="Delete Folder"></div></td></tr></tbody></table>

它仍然按相同的字母顺序显示数据。我无法找出如何解决该问题。

这是 jsfiddle:https://jsfiddle.net/arwnzu03/1/

您能否举例说明如何按字母顺序设置行的文本？

谢谢。

Answer 1

您的解决方案确实有效。然而，由于您使用 jQuery 集合而不是实时集合，因此 DOM 不会自动更新。为此，将元素追加回表中，这将删除旧的 <tr>元素从它们所在的位置并将它们附加到您的 <table id="tcM">表格。

var mylist = $('#tcM');
var listitems = mylist.find('tr');
listitems.sort(function(a, b) {
    return $(a).find('.alC').text().toUpperCase().localeCompare($(b).find('.alC').text().toUpperCase());
});

mylist.append(listitems);

.folder_icon {
    /* background-image: url(http://mail.workwithchrisonline.com/mail/u/0/images/label_grey_20dp.png); */
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/label_black_20dp.png);
    background-position: center;
    background-repeat: no-repeat;
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 11px;
}

.edit_icon {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/edit_black_20dp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
}

.trash_icon {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/delete_black_20dp.png);
    background-position: center;
    background-repeat: no-repeat;
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 11px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tcM" class="table table-inbox table-hover" style="width: 98%; border: 1px solid #d3d3d3;"><tbody class="tBM" style="display: table-row-group;"><tr id="2T" class="To" style="margin-top: 50px;"><td class="alT" style="width: 90%;"><div class="Zsjd8d" act="s"><div id="markMore_img" style="background-image: url(https://www.gstatic.com/images/icons/material/system/1x/more_vert_black_20dp.png);background-position: center;background-repeat: no-repeat;background-size: 20px;width: 20px;height: 20px;display: flex;margin-left: 1px; /* vertical-align: middle; */float: left;" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="More"></div><i style="margin-top: -1px;margin-left: 11px;display: inline-block;" class="folder_icon"></i><div class="alC">test1</div></div></td><td class="alQ"><div id="edit_folder" class="edit_icon" style="float: left;margin-left: 1px;margin-top: 2px;display: inline-block;" data-toggle="tooltip" data-placement="bottom" title="Edit Folder"></div><div id="delete_folder" class="trash_icon" style="display: inline-block;margin-left: 14px;margin-top: 0px;" data-toggle="tooltip" data-placement="bottom" title="Delete Folder"></div></td></tr><tr id="hj" class="To" style="margin-top: 50px;"><td class="alT" style="width: 90%;"><div class="Zsjd8d" act="s"><div id="markMore_img" style="background-image: url(https://www.gstatic.com/images/icons/material/system/1x/more_vert_black_20dp.png);background-position: center;background-repeat: no-repeat;background-size: 20px;width: 20px;height: 20px;display: flex;margin-left: 1px; /* vertical-align: middle; */float: left;" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="More"></div><i style="margin-top: -1px;margin-left: 11px;display: inline-block;" class="folder_icon"></i><div class="alC">test2</div></div></td><td class="alQ"><div id="edit_folder" class="edit_icon" style="float: left;margin-left: 1px;margin-top: 2px;display: inline-block;" data-toggle="tooltip" data-placement="bottom" title="Edit Folder"></div><div id="delete_folder" class="trash_icon" style="display: inline-block;margin-left: 14px;margin-top: 0px;" data-toggle="tooltip" data-placement="bottom" title="Delete Folder"></div></td></tr><tr id="It" class="To" style="margin-top: 50px;"><td class="alT" style="width: 90%;"><div class="Zsjd8d" act="s"><div id="markMore_img" style="background-image: url(https://www.gstatic.com/images/icons/material/system/1x/more_vert_black_20dp.png);background-position: center;background-repeat: no-repeat;background-size: 20px;width: 20px;height: 20px;display: flex;margin-left: 1px; /* vertical-align: middle; */float: left;" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="More"></div><i style="margin-top: -1px;margin-left: 11px;display: inline-block;" class="folder_icon"></i><div class="alC">test new folder</div></div></td><td class="alQ"><div id="edit_folder" class="edit_icon" style="float: left;margin-left: 1px;margin-top: 2px;display: inline-block;" data-toggle="tooltip" data-placement="bottom" title="Edit Folder"></div><div id="delete_folder" class="trash_icon" style="display: inline-block;margin-left: 14px;margin-top: 0px;" data-toggle="tooltip" data-placement="bottom" title="Delete Folder"></div></td></tr><tr id="d5" class="To" style="margin-top: 50px;"><td class="alT" style="width: 90%;"><div class="Zsjd8d" act="s"><div id="markMore_img" style="background-image: url(https://www.gstatic.com/images/icons/material/system/1x/more_vert_black_20dp.png);background-position: center;background-repeat: no-repeat;background-size: 20px;width: 20px;height: 20px;display: flex;margin-left: 1px; /* vertical-align: middle; */float: left;" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="More"></div><i style="margin-top: -1px;margin-left: 11px;display: inline-block;" class="folder_icon"></i><div class="alC">test4</div></div></td><td class="alQ"><div id="edit_folder" class="edit_icon" style="float: left;margin-left: 1px;margin-top: 2px;display: inline-block;" data-toggle="tooltip" data-placement="bottom" title="Edit Folder"></div><div id="delete_folder" class="trash_icon" style="display: inline-block;margin-left: 14px;margin-top: 0px;" data-toggle="tooltip" data-placement="bottom" title="Delete Folder"></div></td></tr></tbody></table>

原因$('#tcM .tBM').sort(sort_folder1).appendTo('.tBM');不起作用是因为您选择了 .tBM里面的元素 #tcM这是 <tbody> 。您应该选择您的<tr> s。

$("#tcM tr").sort(sort_folder1).appendTo(".tBM");

上面的方法也应该可以解决问题。