AGREGAR ETIQUETA 2 o 3 BADGE ESTADO TABLA PROD JS Y JQUERY BOOSTRAP

 Parece que estás utilizando una mezcla de JavaScript/jQuery y HTML dentro de un template string en un contexto de jQuery. Sin embargo, hay un pequeño error de sintaxis y también es importante mencionar que IF no debe estar en mayúsculas y no se usa en el contexto de JavaScript/jQuery. Además, deberías usar if y no IF para condicionales en JavaScript.


Aquí está la corrección del código:


javascript

Copy code

$('tbody').append(`

  <tr data-id="${fila.id}">

    <td>${fila.nombre}</td>

    <td>${fila.precio}</td>

    <td>${fila.rubro}</td>

    <td>

      ${fila.rubro === 'ACTIVO' ? '<span class="badge badge-success">ACTIVO</span>' : '<span class="badge badge-danger">INACTIVO</span>'}

    </td>

    <td><img src="fotos/${fila.fotos}" style="width:80px;"></td>

    <td>

      <button type="button" class="btn btn-success btn-sm update" data-toggle="modal" data-keyboard="false" data-backdrop="static" 

        data-target="#modal-actualizar"

        data-nombre="${fila.nombre}"

        data-precio="${fila.precio}"

        data-rubro="${fila.rubro}"

        data-fotos="${fila.fotos}"

        data-id="${fila.id}">

        Editar

      </button>

    </td>

  </tr>

`);

Cambios realizados:


Se corrigió el uso de IF a if.

La lógica para mostrar el badge ACTIVO o INACTIVO se movió a una expresión ternaria dentro del template string.

Se corrigieron algunos problemas de formato y se simplificó el código para mejor legibilidad.

Si hay una tercera opción, como "NEUTRAL", puedes extender la lógica del operador ternario para incluir esta opción. Aquí está el código ajustado:


javascript

Copy code

$('tbody').append(`

  <tr data-id="${fila.id}">

    <td>${fila.nombre}</td>

    <td>${fila.precio}</td>

    <td>${fila.rubro}</td>

    <td>

      ${fila.rubro === 'ACTIVO' ? '<span class="badge badge-success">ACTIVO</span>' : 

        (fila.rubro === 'INACTIVO' ? '<span class="badge badge-danger">INACTIVO</span>' :

          (fila.rubro === 'NEUTRAL' ? '<span class="badge badge-warning">NEUTRAL</span>' : '')

        )

      }

    </td>

    <td><img src="fotos/${fila.fotos}" style="width:80px;"></td>

    <td>

      <button type="button" class="btn btn-success btn-sm update" data-toggle="modal" data-keyboard="false" data-backdrop="static" 

        data-target="#modal-actualizar"

        data-nombre="${fila.nombre}"

        data-precio="${fila.precio}"

        data-rubro="${fila.rubro}"

        data-fotos="${fila.fotos}"

        data-id="${fila.id}">

        Editar

      </button>

    </td>

  </tr>

`);

En este código, se agregó otra condición al operador ternario para manejar el caso de "NEUTRAL". Si fila.rubro es igual a "NEUTRAL", se mostrará un badge de color amarillo (<span class="badge badge-warning">NEUTRAL</span>). Si no coincide con ninguna de las opciones ("ACTIVO", "INACTIVO", "NEUTRAL"), no se mostrará ningún badge.


Comentarios

Publicar un comentario

Entradas populares de este blog

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

COMO INSERTAR FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE ChatGPT Para insertar una fecha con PHP y MySQL en un formulario usando el método POST con jQuery y la etiqueta date, puedes seguir estos pasos. Asumiré que estás utilizando un formulario HTML con un campo de fecha: Crear el formulario HTML: html Copy code <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Formulario de Fecha</title>     <!-- Agregar jQuery -->     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body>     <form id="miFormulario">         <label for="fecha">Fecha:</label>         <input type="date" id="fecha" name="fecha" required>         <but...
Leer más

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

CONVERTIR IMÁGEN JPG O PNG A WEBP CON PHP DE FORMA SIMPLE

ChatGPT Puedes convertir imágenes de formato JPG o PNG a WebP utilizando la biblioteca GD en PHP. Aquí te muestro un ejemplo simple de cómo hacerlo: php Copy code <?php // Ruta de la imagen de entrada (puede ser JPG o PNG) $imagen_entrada = 'imagen.jpg'; // Ruta de la imagen de salida en formato WebP $imagen_salida = 'imagen.webp'; // Cargar la imagen de entrada $imagen = imagecreatefromstring(file_get_contents($imagen_entrada)); // Verificar si la carga de la imagen fue exitosa if ($imagen !== false) {     // Guardar la imagen en formato WebP     imagewebp($imagen, $imagen_salida);     // Liberar la memoria utilizada por la imagen cargada     imagedestroy($imagen);     echo 'La imagen se ha convertido a formato WebP correctamente.'; } else {     echo 'No se pudo cargar la imagen de entrada.'; } ?> Asegúrate de que la extensión PHP GD esté habilitada en tu servidor. Además, si necesitas ajustar la calidad de la imagen Web...
Leer más