jQuery气泡在表上排序

Question

我有这张桌子，上面有一排数字。现在，我想创建一个jQuery函数，该函数将th在单击该表后对其进行排序，而我想使用Bubble Sort来实现。到目前为止，这是我所做的：

var elements_ar = $(this).parent().parent().siblings('tbody').children('tr').toArray();
for (var i = 0; i < elements_ar.length - 1; i++) {
    for (var j = 0; j < elements_ar.length - i - 1; j++) {
        var element = elements_ar[j],
            next_element = elements_ar[j + 1],
            popularity = $(element).children('td:eq(3)').text(),
            next = $(next_element).children('td:eq(3)').text();
        if (popularity > next) {
            $(element).before(next_element);
        }
    }
};

现在，这是正常的，但并不完美。在此完整的工作示例中，您可以看到有些行不在应有的位置：

var elements_ar = $(this).parent().parent().siblings('tbody').children('tr').toArray();
for (var i = 0; i < elements_ar.length - 1; i++) {
    for (var j = 0; j < elements_ar.length - i - 1; j++) {
        var element = elements_ar[j],
            next_element = elements_ar[j + 1],
            popularity = $(element).children('td:eq(3)').text(),
            next = $(next_element).children('td:eq(3)').text();
        if (popularity > next) {
            $(element).before(next_element);
        }
    }
};

$("body").on('click', '.ppl_avp', function(event) {
    var elements_ar = $(this).parent().parent().siblings('tbody').children('tr').toArray();
    for (var i = 0; i < elements_ar.length - 1; i++) {
        for (var j = 0; j < elements_ar.length - i - 1; j++) {
            var element = elements_ar[j],
                next_element = elements_ar[j + 1],
                popularity = $(element).children('td:eq(3)').text(),
                next = $(next_element).children('td:eq(3)').text();
            if (popularity > next) {
                $(element).before(next_element);
            }
        }
    };
});

table {
  font-family: Zona;
  font-size: 23px;
  margin-top: 100px;
  border: 1px solid gray;
}

table>tbody>tr>td {
  width: 400px !important;
  cursor: pointer;
}

table {
  margin-bottom: 100px;
}

td {
  background: #FFFFFF;
  padding: 15px;
  text-align: left;
  border-right: 1px solid #C1C3D1;
}

tr:nth-child(odd) td {
  background: #EBEBEB;
}

tr:nth-child(odd):hover td {
  background: #4E5066;
}

tr:hover td {
  background: #4E5066;
  color: #FFFFFF;
}

tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color: #666B85;
}

th,
td {
  text-align: center;
  width: 170px;
}

th {
  padding: 15px;
  color: white;
  background: #1b1e24;
}

要对其进行测试，请单击“平均受欢迎程度”。

Answer 1

主要问题是您正在使用数组，但是在需要交换时修改DOM。这意味着数组和DOM不同步。而是对数组进行排序，然后从该数组更新DOM。

第二个问题是您是按文本而不是数字进行排序。如果您以文本方式（例如，按词典顺序精确地排序，例如，对字符串进行排序）排序，那么您"10"会在之前出现"2"，这是您不需要的。:-)而是强制文本或将其转换为数字（您可以通过几种方式中的任何一种；在下面的内容中，我使用一元字符进行+设置popularity和next执行）。

所以：

// *** Get the table body and remember it as we'll want it later
var tbody = $(this).parent().parent().siblings('tbody');
var elements_ar = tbody.children('tr').toArray();
for (var i = 0; i < elements_ar.length - 1; i++) {
    for (var j = 0; j < elements_ar.length - i - 1; j++) {
        var element = elements_ar[j],
            next_element = elements_ar[j + 1],
            popularity = +$(element).children('td:eq(3)').text(),
// Note -----------------^
            next = +$(next_element).children('td:eq(3)').text();
// Note -----------^
        if (popularity > next) {
            // *** Swap them in the array
            elements_ar[j] = next_element;
            elements_ar[j + 1] = element;
        }
    }
};
// *** Update the table body
tbody.html(elements_ar);

更新的代码段：

// *** Get the table body and remember it as we'll want it later
var tbody = $(this).parent().parent().siblings('tbody');
var elements_ar = tbody.children('tr').toArray();
for (var i = 0; i < elements_ar.length - 1; i++) {
    for (var j = 0; j < elements_ar.length - i - 1; j++) {
        var element = elements_ar[j],
            next_element = elements_ar[j + 1],
            popularity = +$(element).children('td:eq(3)').text(),
// Note -----------------^
            next = +$(next_element).children('td:eq(3)').text();
// Note -----------^
        if (popularity > next) {
            // *** Swap them in the array
            elements_ar[j] = next_element;
            elements_ar[j + 1] = element;
        }
    }
};
// *** Update the table body
tbody.html(elements_ar);

$("body").on('click', '.ppl_avp', function(event) {
    // *** Get the table body and remember it as we'll want it later
    var tbody = $(this).parent().parent().siblings('tbody');
    var elements_ar = tbody.children('tr').toArray();
    for (var i = 0; i < elements_ar.length - 1; i++) {
        for (var j = 0; j < elements_ar.length - i - 1; j++) {
            var element = elements_ar[j],
                next_element = elements_ar[j + 1],
                popularity = +$(element).children('td:eq(3)').text(),
    // Note -----------------^
                next = +$(next_element).children('td:eq(3)').text();
    // Note -----------^
            if (popularity > next) {
                // *** Swap them in the array
                elements_ar[j] = next_element;
                elements_ar[j + 1] = element;
            }
        }
    };
    // *** Update the table body
    tbody.html(elements_ar);
});

table {
  font-family: Zona;
  font-size: 23px;
  margin-top: 100px;
  border: 1px solid gray;
}

table>tbody>tr>td {
  width: 400px !important;
  cursor: pointer;
}

table {
  margin-bottom: 100px;
}

td {
  background: #FFFFFF;
  padding: 15px;
  text-align: left;
  border-right: 1px solid #C1C3D1;
}

tr:nth-child(odd) td {
  background: #EBEBEB;
}

tr:nth-child(odd):hover td {
  background: #4E5066;
}

tr:hover td {
  background: #4E5066;
  color: #FFFFFF;
}

tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color: #666B85;
}

th,
td {
  text-align: center;
  width: 170px;
}

th {
  padding: 15px;
  color: white;
  background: #1b1e24;
}