Предположим, у меня есть структура 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>
при загрузке она отображается, как указано выше, т.е. b2cList. Порядок 10 Порядок 11 Порядок 10 12345 QO 1234 123456 Порядок 10
Теперь я хочусортировать в порядке возрастания вышеупомянутой структуры, как показано ниже: b2cList Порядок 10 Порядок 10 Порядок 10 Порядок 11 QO 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 + "\"");
}
}
Пожалуйста, помогите.