2

Quiero pintar algunas filas de la tabla, es posible hacer esto?

me refiero a poner una condición para que se pinte:

if(Object.values(totalDatos[j])[i].tipoUser=='verdadero'

    html += "<td if(Object.values(totalDatos[j])[i].tipoUser=='verdadero')
{style.background-color=yellow} >" + Object.values(totalDatos[j])[i] + "</td>";

ejemplo:

let condicion = true;


var html = "<table border=2 id='examples'>";
html += "<thead>";
html += "<tr><th colspan='3'>Validacion </th></tr>";
html += "<tr>";

html += "<th style='background-color=yellow;'> intento </th>";
html += "<th > Usuario </th>";
html += "<th > Resultado </th></tr> </thead>";

document.getElementById("tablaVariablesSVM").innerHTML = html;
<div id="tablaVariablesSVM"></div>

4
  • 2
    HTML es un lenguaje de marcado no puedes añadir esa lógica. Lo lógico sería hacer el if antes de la asignación a tu variable "html". Si cumple la condición añadir el td con una clase o el estilo inline y si no añadirla sin el estilo.
    – Kiko_L
    Commented el 22 nov. 2018 a las 14:28
  • @Kiko_L es javascript
    – hubman
    Commented el 22 nov. 2018 a las 14:29
  • 1
    Pero estás metiendo una condición dentro de un <td>, que es HTML. A eso se refiere.
    – phpMyGuel
    Commented el 22 nov. 2018 a las 14:29
  • Correcto, y la respuesta que te han dado es a lo que me refería.
    – Kiko_L
    Commented el 22 nov. 2018 a las 15:16

3 respuestas 3

3

Basandome en tu condicion if, reacomode la forma en que asignas la informacion a la variable html.

Prueba con esto:

if(Object.values(totalDatos[j])[i].tipoUser=='verdadero')
{
    html += "<td style='background-color:yellow;'>" + Object.values(totalDatos[j])[i] + "</td>";
}

Si te fijas la condicion no puede ir dentro del html, por eso hay que sacarla hacia arriba y cuando se cumpla, entonces armas el html. Me supongo que estas usando javascript.

Actualizando

Ten presente esto:

html += "<td style='background-color:yellow;'>" + Object.values(totalDatos[j])[i].xxx + "</td>";

Donde xxx es la propiedad que quieres mostrar en la celda.

6
  • si cumple la condicion pero no pinta
    – hubman
    Commented el 22 nov. 2018 a las 16:03
  • html += "<td style='background-color=yellow;'>" + Object.values(totalDatos[j])[i].propiedad_ha_mostrar + "</td>"; debes de colocar que propiedad quieres mostrar en la celda.
    – dlr
    Commented el 22 nov. 2018 a las 16:11
  • si muestra la propiedad pero no pinta
    – hubman
    Commented el 22 nov. 2018 a las 16:36
  • he editado mi pregunta con un ejemplo
    – hubman
    Commented el 22 nov. 2018 a las 16:40
  • muestra el contenido completo de la variable html, para ver como se esta armando la tabla.
    – dlr
    Commented el 22 nov. 2018 a las 16:44
1

Si utilizas las tablas de bootstrap puedes cambiar el color manipulando las clases:

if(Object.values(totalDatos[j])[i].tipoUser=='verdadero')
{
   $('#id_del_tr').addClass('table-warning');
}

Tambien lo puedes hacer con los th o td.

1
  • puedes modificar mi ejemplo con tu respuesta porfavor.
    – hubman
    Commented el 22 nov. 2018 a las 16:43
1
let condicion = true;


var html = "<table class="table" border=2 id='examples'>";
html += "<thead>";
html += "<tr><th colspan='3'>Validacion </th></tr>";
html += "<tr>";
if(condicion){
   html += "<th class='table-warning'> intento </th>";
}else{
    html += "<th> intento </th>";
}

html += "<th > Usuario </th>";
html += "<th > Resultado </th></tr> </thead>";

document.getElementById("tablaVariablesSVM").innerHTML = html;

<div id="tablaVariablesSVM"></div>

Solo si utilizas la tabla de bootstrap.

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.