Skip to main content
Crear filas desde que se carga la página
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

Tu archivo home.php debería ser algo como:

         <table class="table card-table table-vcenter text-nowrap">
           <thead>
             <tr class="o">
               <th>Nombre</th>
               <th>Peso</th>
               <th>Precio actual</th>
             </tr>
           </thead>
            <tbody class="table oro"> <!-- Aquí se actualizan los TR -->

<?php
while ($row_o=mysqli_fetch_array($sql_o)){
    $id_oro=$row_o['id_moneda'];
    $nombre=$row_o['nombre'];
    $gramos=$row_o['gramos'];

    // ¿De dónde sale $precio_materia?
    $precio_final = $precio_materia * $gramos;

    // Usa comillas dobles para no tener que concatenar
    $tabla1// =Crear el contenido de la tabla desde el inicio
    echo "<tr>
                   <td>$nombre</td>
                   <td>$gramos</td>
                   <td id=\"td-$id_oro\" data-precio=\"$precio_materia\">
                       $precio_final
                   </td>
               </tr>";
}
?>
    /        </tbody>
 Supongo que aquí muestras el contenido con echo $tabla
}
?></table>

Luego, vas a tener otro script muy parecido para actualizar la tabla en cada petición AJAXEl archivo var1.php, pero solo vasva a enviar los datos necesarios en un JSON:

<?php
while ($row_o=mysqli_fetch_array($sql_o)){
    $id_oro=$row_o['id_moneda'];
    $nombre=$row_o['nombre'];
    $gramos=$row_o['gramos'];

    // ¿De dónde sale $precio_materia?
    $precio_final = $precio_materia * $gramos;

    // Usa comillas dobles para no tener que concatenar
    $tabla1 = "<tr>
                   <td>$nombre</td>
                   <td>$gramos</td>
                   <td id=\"td-$id_oro\" data-precio=\"$precio_materia\">
                       $precio_final
                   </td>
               </tr>";
    // Supongo que aquí muestras el contenido con echo $tabla
}
?>

Luego, vas a tener otro script muy parecido para actualizar la tabla en cada petición AJAX, pero solo vas a enviar los datos necesarios en un JSON:

Tu archivo home.php debería ser algo como:

         <table class="table card-table table-vcenter text-nowrap">
           <thead>
             <tr class="o">
               <th>Nombre</th>
               <th>Peso</th>
               <th>Precio actual</th>
             </tr>
           </thead>
            <tbody class="table oro"> <!-- Aquí se actualizan los TR -->

<?php
while ($row_o=mysqli_fetch_array($sql_o)){
    $id_oro=$row_o['id_moneda'];
    $nombre=$row_o['nombre'];
    $gramos=$row_o['gramos'];

    // ¿De dónde sale $precio_materia?
    $precio_final = $precio_materia * $gramos;

    // Usa comillas dobles para no tener que concatenar
    // Crear el contenido de la tabla desde el inicio
    echo "<tr>
                   <td>$nombre</td>
                   <td>$gramos</td>
                   <td id=\"td-$id_oro\" data-precio=\"$precio_materia\">
                       $precio_final
                   </td>
               </tr>";
}
?>
            </tbody>
         </table>

El archivo var1.php, solo va a enviar los datos necesarios en un JSON:

Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

El primer paso es generar la tabla completa desde el inicio, agregando en TD donde muestras precio final:

  • ID, quedando td-###, donde ### representa ID de materia (producto o como sea que le llames)
  • Usando atributos de datos agregas el precio, tal como lo obtienes de la base de datos
<?php
while ($row_o=mysqli_fetch_array($sql_o)){
    $id_oro=$row_o['id_moneda'];
    $nombre=$row_o['nombre'];
    $gramos=$row_o['gramos'];

    // ¿De dónde sale $precio_materia?
    $precio_final = $precio_materia * $gramos;

    // Usa comillas dobles para no tener que concatenar
    $tabla1 = "<tr>
                   <td>$nombre</td>
                   <td>$gramos</td>
                   <td id=\"td-$id_oro\" data-precio=\"$precio_materia\">
                       $precio_final
                   </td>
               </tr>";
    // Supongo que aquí muestras el contenido con echo $tabla
}
?>

Luego, vas a tener otro script muy parecido para actualizar la tabla en cada petición AJAX, pero solo vas a enviar los datos necesarios en un JSON:

<?php
// Defines un arreglo antes de ingresar al ciclo
$datos = [];

while ($row_o=mysqli_fetch_array($sql_o)){
    $id_oro=$row_o['id_moneda'];
    $nombre=$row_o['nombre'];
    $gramos=$row_o['gramos'];

    // ¿De dónde sale $precio_materia?
    $precio_final = $precio_materia * $gramos;

    // En lugar de generar la tabla solo vas a llenar el arreglo
    $datos[] = [
        'id' => $id_oro,
        'precio' => $precio_materia,
        'final' => $precio_final
    ];
}
// Al salir del ciclo devuelves el arreglo en JSON
echo json_encode($datos);
?>

La salida de esto, será algo como:

[
    {id: 1, precio: 123, final: 456},
    {id: 2, precio: 123, final: 456}
]

Finalmente, en Javascript recibes el JSON, recorres con .forEach() y actualizas solo la celda específica para cada dato recibido:

$(document).ready(function() {
    setInterval(function () {
        $.get("var1.php", function(data) {
            // Recorrer datos recibidos
            data.forEach(item => {
                // Obtener celda por ID
                let td = $('td-' + item.id);
                // Actualizar precio (atributo de datos)
                $(td).data('precio', item.precio);
                // Actualizar precio final
                $(td).html(item.final);
            });
        }, 'json'); // El último parámetro es para decirle a jQuery qué tipo de dato esperamos
    }, 5000, true);
});

Por ahora no se está usando el precio incluido en atributo de datos, puede ser útil para realizar cálculos en Javascript, depende de si el usuario puede realizar cambios en cada fila de la tabla o no, pero eso ya sería tema de otra pregunta. Si el usuario no va a realizar cambios, entonces puedes omitir esa parte.