javascript - 对表中的行进行排序

Question

我正在尝试根据使用 jQuery 单击哪个列标题按字母顺序对行进行排序。它在调试时工作得相当好，只是它实际上并没有切换 HTML 中的行，因此它不会在网页上显示已排序的表格。我正在使用 Thymeleaf th:text 来填充表格正文行，但为了这个例子，我硬编码了一些值。你可以在这里运行它:https://jsfiddle.net/tg2khrd4
Javascript:

var table = $("#table");

$("#subject, #from, #id")
  .wrapInner('<span title="sort this column"/>')
  .each(function () {
    var th = $(this),
      thIndex = th.index(),
      inverse = false;

    th.click(function () {
      table
        .find("tbody")
        .find("td")
        .filter(function () {
          return $(this).index() === thIndex;
        })
        .sort(
          function (a, b) {
            return $.text([a]) > $.text([b])
              ? inverse
                ? -1
                : 1
              : inverse
              ? 1
              : -1;
          },
          function () {
            // parentNode is the element we want to move
            return this.parentNode;
          }
        );

      inverse = !inverse;
    });
  });

HTML:

<table class="table table-hover" id="table" style="background-color:#fff;border: 1px solid #cccccc">
  <thead style="background-color:#981e32;">
    <tr>
      <td class="tdsubj" id="id" style="padding:5px;">Id
      </td>
      <td class="tdsubj" id="subject" style="padding:5px;">
        Subject
      </td>
      <td class="tdsubj" id="from" style="padding:5px;">
        From
      </td>
      <td class="tdsubj" id="date" style="padding:5px;">
        Date
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Hello</td>
      <td>Thor</td>
      <td>2020-10-19</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Dinos Suck</td>
      <td>Meteor</td>
      <td>2020-9-5</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Big Ben won't stop ringing</td>
      <td>The Queen</td>
      <td>2020-8-19</td>
    </tr>
  </tbody>
</table>

Answer 1

曾经td排序...你只需要遍历它和append它的父级 tr在 table 上...

var table = $("#table");

$("#subject, #from, #id")
  // .wrapInner('<span title="sort this column"/>')
  .each(function () {
    var th = $(this),
      thIndex = th.index(),
      inverse = false;
      

    th.click(function () {
      let test = table
        .find("tbody")
        .find("td")
        .filter(function () {
          return $(this).index() === thIndex;
        })
        .sort(
          function (a, b) {
            return $.text([a]) > $.text([b])
              ? inverse
                ? -1
                : 1
              : inverse
              ? 1
              : -1;
          }

          // That is useless...
          /*function () {
                // parentNode is the element we want to move
                console.log(this.parentNode)
                return this.parentNode;
              }*/
        );

      // Added to demonstrate the sorting works
      console.clear()
      test.each(function () {
        console.log(this.innerText);
      });

      // Now to apply the sorting on the DOM
      // Find the tr containing it and append it to the table.
      test.each(function () {
        table.append($(this).parent("tr"))
      });

      inverse = !inverse;
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover" id="table" style="background-color:#fff;border: 1px solid #cccccc">
      <thead style="background-color:#981e32;">
        <tr>
          <td class="tdsubj" id="id" style="padding:5px;">Id
          </td>
          <td class="tdsubj" id="subject" style="padding:5px;">
            Subject
          </td>
          <td class="tdsubj" id="from" style="padding:5px;">
            From
          </td>
          <td class="tdsubj" id="date" style="padding:5px;">
            Date
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Hello</td>
          <td>Thor</td>
          <td>2020-10-19</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Dinos Suck</td>
          <td>Meteor</td>
          <td>2020-9-5</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Big Ben won't stop ringing</td>
          <td>The Queen</td>
          <td>2020-8-19</td>
        </tr>
      </tbody>
    </table>