【发布时间】：2018-09-26 09:28:45
【问题描述】：
假设我的 HTML 结构如下：
<div class="fullView" id="listParent" style="display: block;">
<div role="row" class="row entry" id="1">
<div class="col2 name" role="gridcell">
<div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
<a href="#" id="WC_RequisitionList_Link_2_1">b2cList</a>
</div>
</div>
</div>
<div role="row" class="row entry" id="2">
<div class="col2 name" role="gridcell">
<div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
<a href="#" id="WC_RequisitionList_Link_2_1">Order 10</a>
</div>
</div>
</div>
<div role="row" class="row entry" id="3">
<div class="col2 name" role="gridcell">
<div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
<a href="#" id="WC_RequisitionList_Link_2_1">Order 11</a>
</div>
</div>
</div>
<div role="row" class="row entry" id="4">
<div class="col2 name" role="gridcell">
<div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
<a href="#" id="WC_RequisitionList_Link_2_1">Order 10</a>
</div>
</div>
</div>
<div role="row" class="row entry" id="5">
<div class="col2 name" role="gridcell">
<div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
<a href="#" id="WC_RequisitionList_Link_2_1">12345</a>
</div>
</div>
</div>
<div role="row" class="row entry" id="6">
<div class="col2 name" role="gridcell">
<div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
<a href="#" id="WC_RequisitionList_Link_2_1">QO</a>
</div>
</div>
</div>
<div role="row" class="row entry" id="7">
<div class="col2 name" role="gridcell">
<div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
<a href="#" id="WC_RequisitionList_Link_2_1">1234</a>
</div>
</div>
</div>
<div role="row" class="row entry" id="8">
<div class="col2 name" role="gridcell">
<div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
<a href="#" id="WC_RequisitionList_Link_2_1">123456</a>
</div>
</div>
</div>
<div role="row" class="row entry" id="9">
<div class="col2 name" role="gridcell">
<div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
<a href="#" id="WC_RequisitionList_Link_2_1">Order10</a>
</div>
</div>
</div>
</div>
加载时呈现如上，即 b2c列表 订购 10 订单 11 订购 10 12345 质量保证 1234 123456 订单10
现在，我想按上述结构的升序排序，如下所示： b2c列表 订购 10 订购 10 订单10 订单 11 质量保证 1234 12345 123456
上面的 HTML 结构是表格结构的列之一（这里我没有使用'<table>'标签）。现在我想根据上面提到的文本对上面的列进行排序，从下拉列表中选择一个选项。我正在使用冒泡排序。
这是我到目前为止编写的代码。
var a = document.getElementById("listParent");
for ( var i = 0; i < a.childNodes.length; i++) {
var swapped = false;
for ( var j = 1; j < a.childNodes.length; j++) {
var divId = document.getElementById('WC_orderSearchResultsArea_Link_2_' + (j - 1));
if (divId) {
var listName = divId.innerHTML.toLowerCase();
if (listName) {
var innerDivId = document.getElementById('WC_orderSearchResultsArea_Link_2_' + j);
if (innerDivId) {
var innerId = innerDivId.innerHTML.toLowerCase();
var firstNum = Number(listName);
var secondNum = Number(innerId);
if(Number.isNaN(firstNum) && Number.isNaN(secondNum)) {
if (listName > innerId) {
swapped = true;
swap(j - 1, j);
}
}
if(firstNum > secondNum) {
swapped = true;
swap(j - 1, j);
}
}
}
}
}
if (swapped == false) {
break;
}
}
swap = function(firstRowIndex, secondRowIndex) {
var firstRow = document.getElementById(firstRowIndex);
var secondRow = document.getElementById(secondRowIndex);
if (firstRow && secondRow) {
var tmp = firstRow.innerHTML;
firstRow.innerHTML = secondRow.innerHTML.replace(/_\d+\"/g, "_" + firstRowIndex + "\"");
secondRow.innerHTML = tmp.replace(/_\d+\"/g, "_" + secondRowIndex + "\"");
}
}
请帮忙。
【问题讨论】：
-
你能控制它的渲染顺序，让它在加载时就已经排序了吗？
-
实际上，整个结构都呈现为表格样式格式（但不带有
标签），并且希望在从下拉列表中选择一个选项时对上述列之一进行排序。
好的，“从下拉列表中选择选项”是您在问题中根本没有提到的要求的一个非常关键的部分。您应该编辑它以包含它。无论如何，到目前为止，您研究或尝试了什么？这不是免费的“做我的研究”或“写我的代码”服务。我们将帮助您解决特定问题，我们不会为您找到完整的解决方案。例如，如果您四处搜索，我想可能有现有的 JavaScript 插件可以帮助您对 HTML 元素/数据进行排序。当然，如果您的数据是真实的<table>，则有几十个添加了更多信息好的，谢谢。你的代码出了什么问题？举例说明您当前获得的结果、预期结果以及它产生的任何错误。不要指望我们只看几秒钟就能立即理解问题。
标签： javascript html sorting bubble-sort