javascript - 使用可扩展部分对表格数据进行排序

Question

现在我有这个:

<style>
  table {
      border-spacing: 0;
      width: 100%;
      border: 1px solid #ddd;
  }

  th, td {
      text-align: left;
      padding: 16px;
  }

  tr:nth-child(even) {
      background-color: #f2f2f2
  }
</style>
<table id="schInfoTable">
  <thead>
    <th onclick="sortTable(0)">Date</th>
    <th>Amount</th>
    <th>Count</th>
  </thead>
  <tbody>
    <tr>
      <td><a onclick="openView('2018-11-14')">2018-11-14</a></td>
      <td>$23,000.00</td>
      <td>12</td>
    </tr>
    <tr style="display:none; background-color: #cbe7cb;" class="2018-11-14">
      <td>Mandy</td>
      <td>Designer</td>
      <td>View</td>
    </tr>
    <tr style="display:none; background-color: #cbe7cb;" class="2018-11-14">
      <td>Robert</td>
      <td>Cook</td>
      <td>View</td>
    </tr>
    <tr>
      <td><a onclick="openView('2018-11-13')">2018-11-13</a></td>
      <td>$13,000.00</td>
      <td>8</td>
    </tr>
    <tr style="display:none; background-color: #cbe7cb;" class="2018-11-13 branches">
      <td>James</td>
      <td>Driver</td>
      <td>View</td>
    </tr>
  </tbody>
</table>
<script>

  function openView(showID){
        $("."+showID).toggle();
    }

  function sortTable(n) {

      var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
      table = document.getElementById("schInfoTable");
      switching = true;
      //Set the sorting direction to ascending:
      dir = "asc"; 
      /*Make a loop that will continue until
      no switching has been done:*/
      while (switching) {
        //start by saying: no switching is done:
        switching = false;
        rows = table.rows;
        /*Loop through all table rows (except the
        first, which contains table headers):*/
        for (i = 1; i < (rows.length - 1); i++) {
          //start by saying there should be no switching:
          shouldSwitch = false;
          /*Get the two elements you want to compare,
          one from current row and one from the next:*/
          x = rows[i].getElementsByTagName("TD")[n];
          y = rows[i + 1].getElementsByTagName("TD")[n];
          /*check if the two rows should switch place,
          based on the direction, asc or desc:*/
          if (dir == "asc") {
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
              //if so, mark as a switch and break the loop:
              shouldSwitch= true;
              break;
            }
          } else if (dir == "desc") {
            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
              //if so, mark as a switch and break the loop:
              shouldSwitch = true;
              break;
            }
          }
        }
        if (shouldSwitch) {
          /*If a switch has been marked, make the switch
          and mark that a switch has been done:*/
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
          //Each time a switch is done, increase this count by 1:
          switchcount ++;      
        } else {
          /*If no switching has been done AND the direction is "asc",
          set the direction to "desc" and run the while loop again.*/
          if (switchcount == 0 && dir == "asc") {
            dir = "desc";
            switching = true;
          }
        }
      }
    }
</script>

jsfiddle 代码在这里:jsfiddle

当您点击日期时，它会展开并显示附加的表格行及其数据:

但是当您点击日期标题按日期排序时，一切都出错了:

如您所见，绿色突出显示的表格数据全部放在底部，但它们应该是这样的:

我如何实现这一目标？

更新:多亏了 David784 的代码，我才能够得到想要的结果，虽然我不得不花一点时间，但所有的功劳都归功于 David。这是我现在拥有的:

function openView(showID) {
  $("." + showID).toggle();
}

function sortTable(n) {

  var table, rows, i, x, y = 0;
  var compare1, compare2;
  table = document.getElementById("schInfoTable");
  switching = true;

  rows = table.querySelectorAll('tr.sort');

  var sortArr = [];
  for (i = 0; i < rows.length; i++) {
    x = rows[i];
    if (i + 1 in rows) y = rows[i + 1].previousElementSibling;
    else y = x.parentElement.lastChild;
    var obj = {
      sort: x.getElementsByTagName("TD")[n].textContent.toLowerCase(),
      range: document.createRange()
    };
    obj.range.setStartBefore(x);
    obj.range.setEndAfter(y);
    sortArr.push(obj);
  }
  function fnSortArrAsc(a, b) {
    if (a.sort > b.sort) return 1;
    else if (a.sort < b.sort) return -1;
    else return 0;
  }
  function fnSortArrDesc(a, b) {
    if (a.sort < b.sort) return 1;
    else if (a.sort > b.sort) return -1;
    else return 0;
  }

  compare1 = rows[0].getElementsByTagName("TD")[0].textContent.toLowerCase();
  compare2 = rows[rows.length-1].getElementsByTagName("TD")[0].textContent.toLowerCase();
  if(compare1 < compare2){
    sortArr = sortArr.sort(fnSortArrDesc);
  }else{
    sortArr = sortArr.sort(fnSortArrAsc);
  }

  frag = document.createDocumentFragment();
  for (i = 0; i < sortArr.length; i++) {
    x = sortArr[i];
    frag.appendChild(x.range.extractContents());
  }
  table.appendChild(frag);
}

完整的工作代码在这里:jsfiddle

Answer 1

这将是完成您尝试做的事情的一种方法，假设您希望保持表结构几乎相同。

JavaScript 的简要说明:

假设:

• 在每个“顶级”TR 上添加类(class)。这些是排序的行
• 任何非顶级 TR 都被假定为其上方顶级 TR 的子行，并将与该行一起移动。

方法论

• 使用添加到顶级 TR 中的新类 querySelectorAll获取我们要排序的所有内容的列表。
• 循环:创建一个对象数组，包括
  • 排序值(正确TD的小写字符串内容)
  • 行的 DOM 范围及其下的所有子行
• 然后使用内置的javascript Array.sort具有简单的自定义排序功能。
• 循环:将所有范围内的内容按顺序提取到一个documentFragment中
• 将 documentFragment 追加到表中

我使用 documentFragment 的原因是它节省了 DOM 回流和渲染，如所述 here on MDN ，与一次将每个范围直接追加回表格元素相比。

注意:如果您有表格页脚，您可能希望使用 tbody元素，而不仅仅是直接处理表格。

    function openView(showID) {
      $("." + showID).toggle();
    }

    function sortTable(n) {

      var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
      table = document.getElementById("schInfoTable");
      switching = true;
      //Set the sorting direction
      dir = 1;
      var thEl = table.querySelectorAll('th')[n];
      if (thEl.classList.contains('asc')) dir = -1;
      thEl.classList.toggle('asc');

      rows = table.querySelectorAll('tr.sort');
      var sortArr = [];
      for (i = 0; i < rows.length; i++) {
        x = rows[i];
        if (i + 1 in rows) y = rows[i + 1].previousElementSibling;
        else y = x.parentElement.lastChild;
        var obj = {
          sort: x.getElementsByTagName("TD")[n].textContent.toLowerCase(),
          range: document.createRange()
        };
        obj.range.setStartBefore(x);
        obj.range.setEndAfter(y);
        sortArr.push(obj);
      }
      function fnSortArr(a, b) {
        if (a.sort > b.sort) return 1 * dir;
        else if (a.sort < b.sort) return -1 * dir;
        else return 0;
      }
      sortArr = sortArr.sort(fnSortArr);
      console.log(JSON.stringify(sortArr, null, 2));
      frag = document.createDocumentFragment();
      for (i = 0; i < sortArr.length; i++) {
        x = sortArr[i];
        frag.appendChild(x.range.extractContents());
      }
      table.appendChild(frag);
    }

    table {
      border-spacing: 0;
      width: 100%;
      border: 1px solid #ddd;
    }

    th,
    td {
      text-align: left;
      padding: 16px;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schInfoTable">
    <thead>
      <th onclick="sortTable(0)">Date</th>
      <th>Amount</th>
      <th>Count</th>
    </thead>
    <tbody>
      <tr class='sort'>
        <td><a onclick="openView('2018-11-14')">2018-11-14</a></td>
        <td>$23,000.00</td>
        <td>12</td>
      </tr>
      <tr style="display:none; background-color: #cbe7cb;" class="2018-11-14">
        <td>Mandy</td>
        <td>Designer</td>
        <td>View</td>
      </tr>
      <tr style="display:none; background-color: #cbe7cb;" class="2018-11-14">
        <td>Robert</td>
        <td>Cook</td>
        <td>View</td>
      </tr>
      <tr class='sort'>
        <td><a onclick="openView('2018-11-13')">2018-11-13</a></td>
        <td>$13,000.00</td>
        <td>8</td>
      </tr>
      <tr style="display:none; background-color: #cbe7cb;" class="2018-11-13 branches">
        <td>James</td>
        <td>Driver</td>
        <td>View</td>
      </tr>
    </tbody>
  </table>

*编辑:添加排序顺序开关

另一种常用的替代方法是将子行放入子表中。例如，您的子数据如下所示: <tr><td colspan='3'> <table>...</table> </td></tr> .然后每个顶级行在其下方都有一个子表行，并且您总是成对排序/移动行，而不是处理从零到无穷大的任意数量的子行。