Home / Questions / 8652
Accepted
Eduardo Munizaga
Asked: 2020-04-28 18:45:16 +0800 CST 2020-04-28 18:45:16 +0800 CST

How to execute a Jquery effect, on the new row of a table that extracts data from a json?

  • 772

I have a table that is fed data from a JSON. The table is updated every x seconds and when new data arrives the table obviously receives a new row of data. What I'm trying to do is add an effect (fade or slide, or change color for a few seconds) to this first row that just arrived, but I can't figure out how to do it.

In this link there is a table with exactly the same effect that I want (You may have to wait a bit for the effect to occur since it is real-time data)

Here goes my code:

javascript

<script type="text/javascript">
  $(document).ready(function(){
        refreshTable();
    });

 function refreshTable(){
    $.ajax({
        url: "ordenajson.php", 
        type: "POST",
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",  
        success: function(data){                    
            $("#contenido").html('');
            if(data != null && $.isArray(data)){
                $.each(data, function(index, value){
                $("#contenido").append("<tr><td>" + value.camion + "</td><td>" + value.estado + "</td><td>" + value.tespera + "</td><td>" + value.tcarga + "</td><td>" + value.tcarga + "</td></tr>").fadeIn(3000);
                });
            }
             setTimeout(refreshTable, 2000);
        }
    });
}
</script>

HTML

<table  class="rwd-table" width='100%' id="tablajson" >
    <thead>
        <tr>
            <th width='20%'>CAMIÓN</th>
            <th width='20%'>ESTADO</th>
            <th width='20%'>T ESPERA</th>
            <th width='20%'>T CARGA</th>
            <th width='20%'>T TOTAL</th>
        </tr>
    </thead>
<tbody id='contenido'></tbody>
</table>
jquery

1 Answers

  1. Best Answer

    The trick is to first insert the row but invisible and then apply an effect to make it show. Here an example:

    $(function() {
  var tbody = $('#contenido');
  var i = 0;
  
  function load() {
    var fila = $('<tr style="display: none"><td>Hola</td><td>'+ i++ + '</td></tr>');
    tbody.append(fila);
    fila.show('slow');
    setTimeout(load, 1000);
  }

  load();
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Mensaje</th>
      <th>Id</th>
    </tr>
  </thead>
  <tbody id='contenido'>
    
  </tbody>
</table>

    In your code there are 2 problems

    $("#contenido").append("<tr><td>...").fadeIn(3000);

    It first appendreturns the reference to the element you're adding content to, in this case your <tbody>"content". In other words, it is applying the animation to the body of the table that is already visible, so nothing happens.

    Second is that the row you are inserting is also visible from the start. That's why in my example I add it style=display: noneto the row.

    • 3