Question

我有我的html表，它使用jquery将行附加到最后一行例如

我多么想要它

ROW1＆GT;＆GT;刚发布

ROW2＆GT;＆GT;发布前1分钟

ROW3＆GT;＆GT;发布前2分钟

但它显示为

ROW1＆GT;＆GT;发布前2分钟

ROW2＆GT;＆GT;发布前1分钟

ROW3＆GT;＆GT;刚发布

<tbody>
  <table align="center" style="width:auto" id="ex-table">
    <tr id="tr">
      <center><th>Date of join</th></center>
      <center><th>name</th></center>
      <center><th>designation</th></center>
      <center><th>exprience</th></center>
      <center><th>salary</th></center>
    </tr> 
  </table> 
</tbody>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    var database = firebase.database().ref().child('user');
    database.on('value', function(snapshot){
        if(snapshot.exists()){
            var content = ' ';
            snapshot.forEach(function(data){
                var val = data.val();
               content +='<tr>';
                content += '<td>' + val.daeofjoin + '</td>';
                content += '<td>' + val.name + '</td>';
                content += '<td>' + val.designation + '</td>';
                content += '<td>'  + val.experience + '</td>';
                content += '<td>'  + val.salary + '</td>';
           content += '</tr>';
            });
            $('#ex-table').append(content)
        }
    });
</script>

Answer 1

您可以在append()循环中使用prepend() / forEach，具体取决于您获得的结果

snapshot.forEach(function(data){
    var val = data.val();
        content ='<tr>';  // <<<< remove + from here 
        content += '<td>' + val.daeofjoin + '</td>';
        content += '<td>' + val.name + '</td>';
        content += '<td>' + val.designation + '</td>';
        content += '<td>'  + val.experience + '</td>';
        content += '<td>'  + val.salary + '</td>';
        content += '</tr>';
        $('#ex-table').append(content); //$('#ex-table').prepend(content);
 });

注意：不要忘记从第一个content =删除+号..如果 append()无法按预期工作，您可以尝试使用prepend() $('#ex-table').prepend(content);

现状我不知道我的代码是否可以与firebase一起使用..但是你可以尝试一下如果它可以正常工作，如果不是你仍然可以看看firebase -> date order reverse

修改 ..我刚刚意识到（来自评论）我的代码会将标题行推到底部..所以你可以使用insertAfter() $(content).insertAfter('#ex-table > tr:first');这行代码将在第一行之后插入新行

使用jquery反转动态html表中的行

1 个答案: