是否可以更改表格的行位置答案

【问题标题】：Is it possible to change row position of a table是否可以更改表格的行位置
【发布时间】：2019-07-17 07:02:16
【问题描述】：

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

我正在使用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>");
  }
});

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

【问题讨论】：

大量的表格排序脚本。不完全清楚你在这里问什么
是的，我已经实现了按字母顺序排序，但我正在寻找的是取一行并使其成为表格的第一行
只在第一个子元素之前追加元素。 var trs = $('#table_body tr'); trs.eq(0).before(trs.eq(3));。当然，如果您只是更改客户端。

标签： javascript jquery firebase firebase-realtime-database html-table

【解决方案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），然后您可以使用insertBeforehttps://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore。 IE 不支持 Prepend，否则我建议这样做。

【讨论】：