Question

我正在尝试在JavaScript中使用插入排序，以便在tbody标签内对tr标签进行排序。每个tr标签都是一个警报，并具有多个td标签，其中包含有关警报的各种信息，例如发送警报的人，负责该警报的人等，但是我需要排序的一个是带有警报的持续时间以字符串形式放置在警报中（例如：00h 01m 42s），并且每两秒增加一次。每个tr标签在这三个之间也有一个类别：“成功”，“警告”和“危险”。如果班级为“成功”，则持续时间将显示为：“完成时间：00h 02m 10s”，并且不会增加。我需要按照从最新到最旧或从最旧到最新的持续时间对tr标签进行排序，并将“成功”类标签放在最后，以便具有“警告”和“危险”类标签（无论这些标签的顺序如何两个），当我按警报的持续时间对标签进行排序时，该标签位于tbody标签的顶部。

我已经能够进行从最新到最旧的排序，并且我有一个函数可以将标签的末尾带有“成功”类，但是从最旧到最新的排序不起作用，由于某种原因，选择这种排序时，“成功”类标记不会放在最后。我尝试通过与从最新到最旧的排序相反的操作来进行从最旧到最新的排序，但这是行不通的。

这是我创建的sortByTime（）函数，用于按持续时间对标记进行排序，我使用document.getElementById（“ tableBody”）来获取我已将“ tableBody”作为id属性赋予的主体在我的页面上：

function sortByTime(order) {
var rows, tableBody, i, j, sortTime, temp;
tableBody = document.getElementById("tableBody");
rows = tableBody.rows;
sortTime=function (temporary, tabIndex, mode) {
    if(mode>0){
        return temporary<tabIndex;
    }else {
        return temporary>tabIndex;
    }

};
switch (order) {
    case "newest":
        for(i=1;i<rows.length;i++){
            temp=rows[i];
            j=i-1;
            while (sortTime(temp.childNodes[4].innerHTML, rows[j].childNodes[4].innerHTML,1)&& j>0){
                rows[i].parentNode.insertBefore(rows[j+1], rows[j]);
                j--;
            }
        }
        sortAlerts("put success last");
        break;
    case "oldest":
        for(i=rows.length;i===0;i--){
            temp=rows[i];
            j=i+1;
            while (sortTime(temp.childNodes[4].innerHTML, rows[j].childNodes[4].innerHTML,0)&& j>0){
                if(rows[i].getAttribute("class")!=="success"){
                    rows[i].parentNode.insertBefore(rows[j+1], rows[j]);
                }
                j++;
            }
        }
        sortAlerts("put success last older");
        break;
}
}

这是我创建的sortAlerts（）函数，目的是通过使用开关按标签的类对标签进行排序。但是为了将“ success”类放在最后，我做了一个“最后放成功”的案例，以区别于将“ success”类标签放在最前面的“ success”案例：

 function sortAlerts(sortWord) {
 if(alerts.length>0){
    var rows, rowToMove, tableBody, i;
    tableBody = document.getElementById("tableBody");
    rows = tableBody.rows;
    if(prevSortWord===sortWord){
        return;
    }
    prevSortWord=sortWord;
    if(sortWord==="put success last older"){
        sortWord="put success last";
    }
    switch (sortWord) {
        case "danger":
            for (i = 0; i < rows.length; i++) {
                rowToMove = rows[i].getAttribute("class");
                if (rowToMove === "danger") {
                    rows[i].parentNode.insertBefore(rows[i], rows[0]);
                }

            }
            break;
        case "warning":
            for (i = 0; i < rows.length; i++) {
                rowToMove = rows[i].getAttribute("class");
                if (rowToMove === "warning") {
                    rows[i].parentNode.insertBefore(rows[i], rows[0]);
                }

            }
            break;
        case "success":
            for (i = 0; i < rows.length; i++) {
                rowToMove = rows[i].getAttribute("class");
                if (rowToMove === "success") {
                    rows[i].parentNode.insertBefore(rows[i], rows[0]);
                }

            }
            break;
        case "put success last":
            for (i = 0; i < rows.length; i++) {
                rowToMove = rows[i].getAttribute("class");
                if (rowToMove === "success") {
                    rows[i].parentNode.insertBefore(rows[i], rows[rows.length-1]);
                }

            }
            break;
    }
}

}

prevSortWord变量是函数外部的变量，它仅用于防止无法通过连续两次调用该函数来完成排序，因为否则，在这种情况下，标签最终将反向排序不是“把成功放在最后”。

我需要一种对“最旧”用例在sortByTime（）函数中对“最新”用例进行反向排序的方法，因为“最旧”用例所做的全部就是以我不希望的方式对标记进行排序真的不明白，因为当我尝试调试它时，即使没有读取应该执行的代码行，显然读取的每一行代码都会交换tbody标签内的位置。

Answer 1

我很难推理上述功能，但是我怀疑是这样的：

sortByTime函数实际上并未检查表行中的时间，并且
元素插入的顺序可能有所不同

我写了一个类似的函数，其行为略有不同。希望它会对您有所帮助：

// Returns the sort-comparable timestamp (you'll want to change this)
function getTimeInt (timeStr) {
  return timeStr.substring(timeStr.lastIndexOf(' ') + 1)
}

function sortAlerts (word, _reverse = false) {
  const tableBody = document.querySelector('#tableBody')
  const reverse = _reverse ? -1 : 1

  // Sort the rows, and add them back to the tableBody
  Array.apply(null, tableBody.querySelectorAll('tr'))
    .sort(function(rowA, rowB) {
      // Change this function return to do different things, like putting success at bottom
      return (
        (rowA.classList.contains(word) - rowB.classList.contains(word)) ||
        ((getTimeInt(rowA.innerText) - getTimeInt(rowB.innerText)) * reverse)

      )
    })
    .forEach(function (row) {
      row.parentNode.removeChild(row)
      tableBody.appendChild(row)
    })

}

// Put danger at top, and reverse the search
sortAlerts('danger', true)

这是jsfiddle： https://jsfiddle.net/r6sxmko7/

对不起，我帮不上忙。

有没有一种方法可以使用插入排序的相反方式来用javascript对标签进行排序？

1 个答案: