我正在尝试使用JavaScript中的插入排序,以便对Tbody标签中的TR标签进行排序。每个TR标签都是警报,具有多个TD标签,并具有有关警报的各种信息,例如发送警报的人,照顾警报等等等等……但是,我需要进行的分类是带有TD的TD警报的持续时间将其内部的字符串放在(例如:00h 01m 42s)中,每两秒钟增加。每个TR标签在这三个之间也有一个类:"成功","警告"one_answers"危险"。如果类是"成功",则显示持续时间为:例如:"完成:00h 02m 10s",并且不会增加。我需要在持续时间从最新到最古老的时间到最新的时间对TR标签进行排序,并将"成功"类标签放在最后,以便具有"警告"one_answers"危险"类标签(无论这些订单如何当我按照警报的持续时间对标签进行排序时,在tbody标签的顶部。
我已经能够进行从最新到最古老的分类,并且我有一个函数,该功能在结尾处放置了"成功"类的标签当选择这种排序时,"成功"类标签不会在结尾处放置。我试图通过对从最新到最大的分类进行反向进行从最旧到最新的分类。
这是我创建的sortbytime()函数,以便按持续时间对标签进行排序,我使用document.getElementById(" tabledoby"),以获取我给出的" tabledoby"作为id属性的tbody在我的页面上:
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()函数,以便使用开关通过其类对标签进行排序。但是,为了将"成功"课放在最后,我提出了一个"成功",以将其与"成功"案例区分开来,该案例将"成功"类标签放在顶部:
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()函数的"最旧"情况下对"最新"案例进行反向排序的方法t真正理解,因为当我尝试调试时,即使不应该这样做的行,也显然会读取的代码的每一行都可以交换tbody标签。
我很难推理上述功能,但是我怀疑的是:
- 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/
对不起,我再也没有帮助。