Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

413
Vistas
Resalte la celda correspondiente de la tabla <TD> según el nombre de la fila y el valor de la celda

¿Cómo haría para resaltar una celda según el nombre de la fila y el valor de la columna de la primera columna? He incluido un violín.

 $('tr').each(function() { var currentValue = $(this).find('th').text(); var currentValue2 = $(this).find('td').text(); if(('Value 1' == currentValue) && ('Value 1' == currentValue2)) { $(this).addClass('highlight'); } });
 .highlight { background: #FFFF00; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <th>test</th> <th>test2</th> </tr> <tr> <td>Value 1</td> <td>12</td> </tr> <tr> <td>Value 2</td> <td>0</td> </tr> </table>

http://jsfiddle.net/alsjka/entumojr/

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

eso es mucho más complicado que lo que escribiste hermano,

su algoritmo es incorrecto para lo que quiere, quiere esto: si un encabezado tiene el texto "Uno" y el td tiene el mismo texto "Uno" (o cualquier texto deseado), desea agregar una clase de resaltado a td

por lo que su búsqueda no debe comenzar desde los elementos tr , sino desde los elementos th

y para cada uno de th elementos que necesita para recorrer todos los elementos tr en busca de un td que tenga el mismo texto (o el que desee)

he cambiado un poco tu codigo y este es el resultado

 $('th').each(function(index,item) { var currentValue = $(item).text(); $('tr').each(function(index,item){ var tdElements = $(item).find("td"); tdElements.each( function(index,item){ var currentValue2 = $(item).text(); if(('test' == currentValue) && ('Value 1' == currentValue2)) { $(this).addClass('highlight'); $(this).next().addClass('highlight2') } }) }) });

http://jsfiddle.net/mahdiar_mansouri/txo2jpmq/11/

=========

según su nuevo comentario, creo que desea que se seleccione el siguiente elemento de la coincidencia, así que lo actualicé un poco, consulte el violín para obtener el mejor resultado y vea si es lo que quería

===========

ACTUALIZADO

basado en su último comentario Desea el TH correspondiente y el primer TD de una fila

Este fragmento puede ayudarte a hacerlo.

 $('th').each(function(index,item) { var currentValue = $(item).text(); $('tr').each(function(index2,item){ var tdElements = $(item).find("td"); if(tdElements.first().text() == "Value 2" && currentValue == 'test8' ){ tdElements.eq(index).addClass('highlight'); } })

});

Aquí está el violín

http://jsfiddle.net/mahdiar_mansouri/06ygpzqd/3/

about 4 years ago · Juan Pablo Isaza Denunciar

0

Me gustaría contribuir con una respuesta a mi OP. Gracias por todas las respuestas y sugerencias..

http://jsfiddle.net/alsjka/81sy27d4/88/

 --Css to highlight table cell .highlight { background: green; } --find table header index by cell name using "TH" var row = $("#tab").find("th:contains('tblh2')").closest('th').index(); --Find non header index by cell name using "TD" var col = $("#tab").find("td:contains('tblh3')").closest('tr').index(); --Script to use the found indexes and highlight the cell $('table tr:eq(' + row + ') td:eq(' + col + ')').addClass('highlight'); --Sample table <table border="2" width="200" id="tab"> <tr> <th></th> <th>tblh1</th> <th>tblh2</th> <th>tblh3</th> </tr> <tr> <td>tblh1</td> <td>3</td> <td>5</td> <td>5</td> </tr> <tr> <td><span>tblh2</span></td> <td>4</td> <td>6</td> <td>2</td> </tr> <tr> <td>tblh3</td> <td>5</td> <td>2</td> <td>4</td> </tr> </table>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda