javascript - 是否可以更改表格的行位置

Question

是否可以将行的位置更改为表格顶部(第一行)

我使用 firebase 作为表的数据源，但我不知道如何在点击一行或更新数据时使其成为第一行

我已经在编辑行数据时设置了时间戳，因此也许有办法从 firebase 获取按时间戳排序的行

这是表的代码以及我如何向其分配数据

    <div class="tableDiv" align="left">
      <table id="example" class="display" align="center">
        <thead>
          <tr style="color: #c00; background: #FFCC01;">
            <td onclick="sortTable(0)">Date</td>
            <td onclick="sortTable(1)">RR</td>
            <td onclick="sortTable(2)">Origin</td>
            <td onclick="sortTable(3)">Destination</td>
            <td onclick="sortTable(4)">CNEE</td>
            <td onclick="sortTable(5)">Status</td>
            <td>Details</td>
          </tr>
        </thead>
        <tbody id="table_body"></tbody>
      </table>
    </div>

var rootRef = firebase.database().ref().child("Requests");


rootRef.on("child_added", snap => {


  var DateValue = snap.child("Date").val();
  var RRValue = snap.child("RR").val();
  var OrgValue = snap.child("Origin").val();
  var DestValue = snap.child("Destination").val();
  var CustNameValue = snap.child("Customer Name").val();
  var StatusValue = snap.child("Status").val();

  //table data fetched from firebase
  if (StatusValue == "Pending") {
    $("#table_body").append("<tr><td>" + DateValue +
      "</td><td class=\"valueRRField\">" + RRValue +
      "</td><td>" + OrgValue +
      "</td><td>" + DestValue + "</td><td>" + CustNameValue
      + "</td><td>" + StatusValue + "</td><td><Button class=\"lisnClick\">" + "Expand" + "</Button></td></tr>");
  }
});

请我至少需要有关如何实现它的提示

Answer 1

您可以使用 Firebase SDK .orderByChild ( https://firebase.google.com/docs/reference/js/firebase.database.Reference.html#orderbychild ) 从 Firebase 获取按时间戳排序的数据。确保日期采用自 Unix 纪元以来的单位(例如毫秒)，以便按数字方式处理排序(而不是按“2019 年 5 月 12 日星期日”等日期进行排序)。您甚至可以让 Firebase 为您生成时间戳 ( https://firebase.google.com/docs/reference/js/firebase.database.ServerValue#.TIMESTAMP )

它看起来像:

firebase
  .database()
  .ref('/Requests')
  .orderByChild('timestamp')

您当然可以操作 DOM 并将一行从一个位置移动到顶部，但我认为使用更新的数据重新渲染会产生更好的代码，并且您可以享受 Firebase 实时更新的好处。要移动一行，您只需要获取对父元素的引用、移动后它将位于其前面的项目以及它(例如使用 querySelector)，然后您可以使用 insertBefore https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore 。 IE 不支持 Prepend，否则我建议这样做。