1

soy nueva en el campo de la programación y más en este lenguaje. Necesito que un campo de una tabla dinámica que tenga un fondo diferente dependiendo de su contenido, así como en la imagen, no se me ocurre como realizarlo lo he intentado con jquery. La tabla es creada con react co valores obtenidos desde una bd de Firebase.

debe quedar de esta manera

Este es donde pinta la tabla.

        return this.state.data.map((point, index) => {
            return <tr key={index}
            id={index}
            style={rowStyle}
            className="mask flex-center rgba-red-strong"
            // description={point.desc}
            ica={point.ICA}
            >
            <td style={{display:'none'}}>{point.id}</td>
            <td>{point.zonaHoraria}</td> 
            <td style={{textAlign:'left'}}>{point.coments}</td>
            <td style={{display:'none'}}>{point.puntoscardenales}</td>
            <td>{this.roundNumbers(point.ICA)}</td>
            <td>{point.criterio}</td>
            {/* onBlur={{function(){if(point.criterio == "Aceptable"){$('td').css('background-color','blue');}}}} */}
            <td style={{display:'none'}}>{this.roundNumbers(point.IWTotal)}</td>
            <td style={{display:'none'}}>{this.roundNumbers(point.generalTotalWeight)}</td>
            <td>{this.roundNumbers(point.indicadoresConsideradosTotal)}</td>
            <td style={{display:'none'}}>{point.lat}</td>
            <td style={{display:'none'}}>{point.lng}</td>
            <td style={{textAlign:'center'}}>{this.roundNumbers(point.margenError)}</td>
            <td style={{textAlign:'center'}}>{point.userToma}</td>
            <td>{point.userEditor}</td>
            <td style={{display:'none'}}>{point.desPunto}</td>
            <td>{point.ObservaLabo}</td>
            <td><button type="button" className="btn btn-primary" data-toggle="modal" data-target=".bd-edit-modal-lg" onClick={this.onDataClick.bind(this, point)}>Editar Registro</button></td>
            <td><button type="button" className="btn btn-success" data-toggle="modal" data-target=".bd-crite-modal-lg" onClick={this.ObservaLabo.bind(this, point)}>Agregar Observación</button></td>
            </tr>
        })
    } 

Intento leer todas filas de la tabla pero solo la columna de "criterio general", pero solo lee la primera fila. No se que hacer para solucionar el problema. Gracias si podrían ayudarme.

2
  • primeramente, React no depende del DOM, React la pinta segun los datos, lo que indica que deberias recorrer tu lista y cambiar el valor a usar style={point.pintar ? rowStyle:rownostyle}, no necesitas recorrer la tabla, ya que tienes la lista, cuyo dato deberia estar guardado en un estado el 11 nov. 2020 a las 2:28
  • Era lo que estaba intentando pero solo me marcaba el primer valor. Gracias por la respuesta. el 11 nov. 2020 a las 2:35

2 respuestas 2

0

Lo logré, la solución era muy simple, lo comparto por si sirve.

$(function(){ 

$('#idTable tr').each(function () { var apellidos = $(this).find("td").eq(5).html();

            if(apellidos == "Altamente contaminado"){
                var apellidos = $(this).find("td").eq(5).css({'background-color': "#101111" ,'color': "#EDF5F0"})
            }
            if(apellidos == "Contaminado"){
                var apellidos = $(this).find("td").eq(5).css({'background-color': "#E83D06"})
            }
            if(apellidos == "Poco Contaminado"){
                var apellidos = $(this).find("td").eq(5).css({'background-color': "#EEF51C"})
            }
            if(apellidos == "Aceptable"){
                var apellidos = $(this).find("td").eq(5).css({'background-color': "#65D78E"})
            }
            if(apellidos == "No contaminado"){
                var apellidos = $(this).find("td").eq(5).css({'background-color': "#698EF1"})
            }
            if(apellidos == "Valor de ICA no corresponde al rango"){
                var apellidos = $(this).find("td").eq(5).css({'background-color': "#B6BDB9"})
            }
        })

;)

2
  • Puede servir, pero considera que se podría hacer mejor si defines un método al que le pases como parámetro los apellidos y eso lo hagas dentro de ese método y sólo retornes los estilos. Luego en tu tabla llames a ese método, sería un código más limpio. el 11 nov. 2020 a las 2:36
  • Muchas Gracias lo intentaré. el 11 nov. 2020 a las 2:40
0

Entendi que lo que quieres es poner un color distinto en la tabla dependiendo de el texto, puedes hacer lo siguiente:

export default function MyComponent() {
  // ...

  const getTableColor = criterio => {
    criterio = criterio.toLowerCase()

    switch (criterio) {
      case "altamente contaminado":
        return { backgroundColor: '#101111', color: '#EDF5F0' }
      case "contaminado":
        return { backgroundColor: "#E83D06" }
      case "poco contaminado":
        return { backgroundColor: '#EEF51C' }
      case 'aceptable':
        return { backgroundColor: '#65D78E' }
      case 'no contaminado':
        return { backgroundColor: '#698EF1' }
      default:
        return { backgroundColor: 'white', color: 'black' }
    }
  }

  return (
    // ...
      <td style={getTableColor(item.criterio)}>{item.criterio}</td>
    // ...
  )
}

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.