¿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>
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
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>