Inverting the rows in dynamic html table using jquery

Question

I have my html table which appends row to the last row using jquery for example

how I want it

row1>> Just posted

row2>> posted 1min before

row3>> posted 2 min before

But it shows like

row1>> posted 2 min before

row2>> posted 1min before

row3>> Just posted

<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>

Mohamed-Yousef · Answer 1 · 2018-03-21T03:22:12.300

0

You can use append()/prepend() inside the forEach loop depending on the results you'll get

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);
 });

Note: don't forget to remove + sign from first content = .. if append() not work as expected you can try use prepend() $('#ex-table').prepend(content);

Actuality I don't know my code will work with firebase or not .. but you can try it if it works ok if not you can still take a look at firebase -> date order reverse

Edit.. I just realized (from comment) that my code will push the header row to bottom .. so you can use insertAfter() $(content).insertAfter('#ex-table > tr:first'); this line of code will insert the new rows after the first row

edited Mar 21 '18 at 03:22

answered Mar 21 '18 at 02:48

Mohamed-Yousef

23,946
3
19
28

thanks so much....works work i use prepend but the (table headings) are also going back to the last row – Shiva Mar 21 '18 at 03:07
@Shiva sorry about that just a minute – Mohamed-Yousef Mar 21 '18 at 03:09
@Shiva try `$(content).insertAfter('#ex-table > tr:first');` instead of append or prepend line – Mohamed-Yousef Mar 21 '18 at 03:13
sorryeven that doesn't work it makes the whole table to disappear – Shiva Mar 21 '18 at 03:25
@Shiva not it should not .. but while you gave the first row `id="tr"` you can try `$(content).insertAfter('#tr');` – Mohamed-Yousef Mar 21 '18 at 03:30
Thanks so much...Happy day – Shiva Mar 21 '18 at 03:32
glad to help @Shiva .. Have a great day too :-) – Mohamed-Yousef Mar 21 '18 at 03:33

Inverting the rows in dynamic html table using jquery

1 Answers1