1

Buen día, tengo una tabla de tareas que consulto de una BD Mysql con PHP. Uno de los campos de la tabla, es el ESTADO DE LA TAREA ( FK de la tabla ESTADOS), y dependiendo de la opción elegida, necesito que tome un BACKGROUND determinado. El hecho es que cuando cuando intento darle formato usando JavaScript, solo se aplica al primer registro de la tabla. Tengo una columna oculta con el ID de la tabla de ESTADO, dependiendo del valor que toma ese campo, el campo DESCRIPCION DEL ESTADO debe cambiar los colores del fondo.

Estoy comenzando en mi aprendizaje así que me vendría muy bien sus aportes.

Desde ya muchas gracias por su ayuda. Saludos!

<table id="target">
        <tr>
            <th style='text-align:center'>#</th>
            <th style='text-align:center'>Fecha</th>
            <th style='text-align:center'>Solicitante</th>
            <th style='text-align:center'>Asunto</th>
            <th style='text-align:center'>Tipo de Tarea</th>
            <!--<th style='text-align:center'>Recibido</th>-->
            <th style='text-align:center'>Técnico Asignado</th>
            <th style='text-align:center' style="visibility:hidden;">idEstado</th>
            <th style='text-align:center'>Estado</th>
            <th style='text-align:center'>Acciones</th>
        </tr>
        <?php
    
        $query = mysqli_query($conexion, "SELECT * FROM tareas a
                                                    INNER JOIN personal p        ON a.solicitante_id = p.idPersonal
                                                    INNER JOIN estado_tareas g   ON a.estadoTarea_id = g.idestado_tareas
                                                    INNER JOIN tipos_de_tareas c ON a.tipoTarea_id = c.idTiposTareas
                                                    INNER JOIN usuarios u        ON a.tecAsignado_id = u.idUsuario
                                                    WHERE      a.estatus = 1     AND estadoTarea_id != 4 
                                                    ORDER BY a.idtareas DESC");


        $result = mysqli_num_rows($query);

        if ($result > 0) {

            while ($data = mysqli_fetch_array($query)) {
                
        ?>
        <tr>
            <td style='text-align:center'><?php echo $data["idtareas"]; ?></td>
            <td style='text-align:center'><?php echo date('d/m/Y',strtotime($data['fec_pedido']));?></td>
            
            <td ><?php echo $data["apeNomb"]; ?></td>
            <td ><?php echo $data["asuntoTarea"]; ?></td>
            <td ><?php echo $data["detalle_tipos_tareas"]; ?></td>
            <td ><?php echo $data["nombre"]?></td>
           <td class="detalles" id="idTarea"><?php echo $data["idestado_tareas"]; ?></td>
            <td class="detalles" id="detalleTarea"><?php echo $data["detalle_estado"]; ?></td>
            
            <td style='text-align:center' class='acciones'>
                <div class="contenedor-botones ">
                    <a href="editar_tareas.php?id=<?php echo $data["idtareas"]; ?>"><img class="eliminar_editar"
                            src="../../img/editar.png"></a>
                    |
                    <a href="eliminar_tareas.php?id=<?php echo $data["idtareas"]; ?>"><img class="eliminar_editar"
                            src="../../img/eliminar.png"></a>
                </div>

            </td>
        </tr>

        <?php
            }
        }
        ?>
    </table>
 

Agrego el SCRIPT

var opcion = document.Element('idtarea').value;


if(opcion == 1){
    document.getElementById('detalleTarea').style.backgroundColor = 'red';
}
if(opcion == 2){
    document.getElementById('detalleTarea').style.backgroundColor = 'yellow';
}
if(opcion == 4){
    document.getElementById('detalleTarea').style.backgroundColor = 'red';
}
</script>
1
  • Y el codigo?, debes subir el codigo para que podamos ayudarte, recuerda NO subir el codigo como imagen
    – David081
    Commented el 5 may. 2022 a las 15:50

1 respuesta 1

0

Yo para estos casos en general prefiero utilizar directamente clases y su definición en el propio archivo o en un CSS externo. Mi sugerencia, sin tener que utilizar además javascript, sería algo así...

<style>
    #target td.detalles.detalles_estado_id_1 {
        background-color:'red';
    }
    #target td.detalles.detalles_estado_id_2 {
        background-color:'yellow';
    }
    #target td.detalles.detalles_estado_id_4 {
        background-color:'red';
    }
</style>

<table id="target">
    <tr>
        <th style='text-align:center'>#</th>
        <th style='text-align:center'>Fecha</th>
        <th style='text-align:center'>Solicitante</th>
        <th style='text-align:center'>Asunto</th>
        <th style='text-align:center'>Tipo de Tarea</th>
        <!--<th style='text-align:center'>Recibido</th>-->
        <th style='text-align:center'>Técnico Asignado</th>
        <th style='text-align:center' style="visibility:hidden;">idEstado</th>
        <th style='text-align:center'>Estado</th>
        <th style='text-align:center'>Acciones</th>
    </tr>
    <?php

    $query = mysqli_query($conexion, "SELECT * FROM tareas a
                                                INNER JOIN personal p        ON a.solicitante_id = p.idPersonal
                                                INNER JOIN estado_tareas g   ON a.estadoTarea_id = g.idestado_tareas
                                                INNER JOIN tipos_de_tareas c ON a.tipoTarea_id = c.idTiposTareas
                                                INNER JOIN usuarios u        ON a.tecAsignado_id = u.idUsuario
                                                WHERE      a.estatus = 1     AND estadoTarea_id != 4 
                                                ORDER BY a.idtareas DESC");


    $result = mysqli_num_rows($query);

    if ($result > 0) {

        while ($data = mysqli_fetch_array($query)) {
            
    ?>
    <tr>
        <td style='text-align:center'><?php echo $data["idtareas"]; ?></td>
        <td style='text-align:center'><?php echo date('d/m/Y',strtotime($data['fec_pedido']));?></td>
        
        <td ><?php echo $data["apeNomb"]; ?></td>
        <td ><?php echo $data["asuntoTarea"]; ?></td>
        <td ><?php echo $data["detalle_tipos_tareas"]; ?></td>
        <td ><?php echo $data["nombre"]?></td>
        <td class="detalles detalles_estado_id_<?php echo $data["idestado_tarea"]; ?>"><?php echo $data["detalle_estado"]; ?></td>
        
        <td style='text-align:center' class='acciones'>
            <div class="contenedor-botones ">
                <a href="editar_tareas.php?id=<?php echo $data["idtareas"]; ?>"><img class="eliminar_editar"
                        src="../../img/editar.png"></a>
                |
                <a href="eliminar_tareas.php?id=<?php echo $data["idtareas"]; ?>"><img class="eliminar_editar"
                        src="../../img/eliminar.png"></a>
            </div>

        </td>
    </tr>

    <?php
        }
    }
    ?>
</table>

Lo que también te diría es que hay otras cosas extrañas en tu código inicial... por ejemplo, poner id a celdas que se repetirán (idtarea y tareaDetalle) y que van contra la propia definición de id si después quieres utilizarlo en javascript. Para eso es mucho mejor utilizar clases auxiliares, pero tratar siempre de que los ids sean únicos (por ejemplo, añadiendo el número de fila o el id del $data) También comento que el propio script de javascript no lo entiendo muy bien y tampoco el enfoque que tenías para iterar por cada fila, pero bueno... con las clases el php ya se puede resolver tu problema

1
  • Perfecto VFG. Es lo que necesitaba. Como te habrás dado cuenta, estoy empezando en este mundo de la programación. Te agradezco por dedicar tu tiempo a mi consulta. Saludos Commented el 6 may. 2022 a las 15:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.