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

我创建了一个对表行进行排序的示例。但是，如果您只是在进行文本比较，则“ test new folder”将在“ test1”之前，因为空格将在“ 1”字符之前排序。

const myList = document.getElementById('tcM');
const listItems = myList.querySelectorAll('tr');

// Turn the list into an array for sorting
let listArray = [...listItems];
listArray.sort((a, b) => a.innerText.toLowerCase() < b.innerText.toLowerCase() ? -1 : 1);

// Replace the table contents
listArray.forEach(item => myList.appendChild(item));

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

<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>

Answer 2

Ed的解决方案已经可以完美运行。通过使用它并使用一些ES6语法，我发现您可以进一步缩短脚本部分。这将适用于所有现代浏览器，但不适用于Internet Explorer。

我使用.appendChild()而不是.append()，而省略了innerHTML=''位，因为<tr>将会被移动并且不会被复制。

// shortcut function qsa():
function qsa(s,c){ return [...(c||document).querySelectorAll(s)];}
// collect all TRs and sort them:
var trs=qsa('#tcM tbody tr').sort((a, b) => a.innerText.toLowerCase() < b.innerText.toLowerCase() ? -1 : 1);

// Replace the table contents
trs[0].parentNode.append(...trs);

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

<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>

Answer 3

您的解决方案确实有效。但是，由于您使用的是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>。

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

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

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

3 个答案: