Tengo una tabla que se alimenta de los datos de un JSON
. La tabla se actualiza cada x segundos y al llegar nuevos datos la tabla obviamente recibe una nueva fila de datos. Lo que intento hacer es agregarle un efecto (de fundido o slide
, o que cambie de color por unos segundos) a esta primera fila que recién llega, pero no logro entender cómo hacerlo.
En este link hay una tabla con exactamente el mismo efecto que deseo (Es posible que se deba esperar un poco para que ocurra el efecto ya que se trata de datos en tiempo real)
Aquí va mi código:
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>