0

Como haria para ubicar una fila en una tabla que se arma de la siguiente forma:

<table cellpadding="0" cellspacing="0" border="0" style="width:740px !IMPORTANT; overflow:scroll; border:1px solid #FF6600;" class="display2">
  <tr style="background:yellow">
    <td align="center">9045</td>
    <td style="padding:2px 6px; width:15%; text-align:center;" class="jugador6275">Sr contreras</td>
    <td align="center">
      <table class="puntos">
        <tr>
          <td align="left" style="padding-right:14px;border-width:1px; width:50%; border:none;"><b style="font-size:14px">&nbsp5</b></td>
          <td align="right" style="padding-left:14px; width:50%; border:none; "><span style="color:blue">3</span></td>
        </tr>
      </table>
    </td>
    <td align="center">
      <table class="puntos">
        <tr>
          <td align="left" style="padding-right:14px;border-width:1px; width:50%; border:none;"><b style="font-size:14px">&nbsp8</b></td>
          <td align="right" style="padding-left:14px; width:50%; border:none; "><span style="color:blue">3</span></td>
        </tr>
      </table>
    </td>
    <td align="center">
      <table class="puntos">
        <tr>
          <td align="left" style="padding-right:14px;border-width:1px; width:50%; border:none;"><b style="font-size:14px">&nbsp5</b></td>
          <td align="right" style="padding-left:14px; width:50%; border:none; "><span style="color:red">0</span></td>
        </tr>
      </table>
    </td>
    <td align="center">
      <table class="puntos">
        <tr>
          <td align="left" style="padding-right:14px;border-width:1px; width:50%; border:none;"><b style="font-size:14px">&nbsp3</b></td>
          <td align="right" style="padding-left:14px; width:50%; border:none; "><span style="color:blue">3</span></td>
        </tr>
      </table>
    </td>
    <td align="center">
      <table class="puntos">
        <tr>
          <td align="left" style="padding-right:14px;border-width:1px; width:50%; border:none;"><b style="font-size:14px">&nbsp5</b></td>
          <td align="right" style="padding-left:14px; width:50%; border:none; "><span style="color:red">0</span></td>
        </tr>
      </table>
    </td>
    <td align="center">
      <table class="puntos">
        <tr>
          <td align="left" style="padding-right:14px;border-width:1px; width:50%; border:none;"><b style="font-size:14px">&nbsp8</b></td>
          <td align="right" style="padding-left:14px; width:50%; border:none; "><span style="color:blue">1</span></td>
        </tr>
      </table>
    </td>
    <td align="center" style="color: #fff; background:#0099FF;"><b style="color: #fff; font-size:13px">10</td></b></tr>
  <tr>
</table>

el resultado es el siguiente:

introducir la descripción de la imagen aquí

quiero ubicar la fila basandome en el resultado de la primera columna que en este caso es 9045 pero puede ser otro. Generalmente las ubico con document.getElementById anadiendo un id a cada fila, pero esta tabla se arma con una consulta de la base de datos y eso no puedo modificarlo. Lo que busco es ubicar una serie de elementos para pintar las filas relacionadas al usuario que ingreso.

9
  • No tienes posibilidad alguna de poder agregar el id?, piense que si busca el valor en toda la tabla, existe la posibilidad que encuentre resultados repetidos y eso genere conflictos
    – Oscar Cid
    Commented el 7 mar. 2018 a las 16:00
  • 1
    La pregunta no se entiende bien. ¿Tendrías que recorrer las primeras columnas de varias filas de la tabla hasta encontrar ese valor? ¿O bien tendrías que encontrar siempre el valor de la primera columna de la tabla? ¿Habría una sola tabla en el DOM, habría más de una tabla? ¿Si habría más de una tabla, qué posición ocuparía la tabla en cuestión en el DOM? Es información imprescindible que debería constar en tu pregunta para darte una respuesta adecuada.
    – A. Cedano
    Commented el 7 mar. 2018 a las 16:09
  • 1
    Además, la tabla que presentas es, con todo respeto, desastrosa: Tienes una etiqueta table de apertura, y dentro de ella tienes un tr en el cual, antes de cerrarlo metes un td y dentro de él metes otro table... en fin, un verdadero desastre que deberías corregir porque así es imposible trabajar los datos. No puedes meter un elemento table dentro de un td que está a su vez dentro de un tr. ¡Estás queriendo llevar un avión en una bicicleta!
    – A. Cedano
    Commented el 7 mar. 2018 a las 16:22
  • 1
    ¿No tienes acceso al código que recibe los datos y los imprime? Trabajar sobre datos erróneos o mal formados puede resultar ser peligroso. Será un código ambiguo, inseguro, que podría tener comportamientos inesperados según el caso.
    – A. Cedano
    Commented el 7 mar. 2018 a las 16:29
  • 1
    @A.Cedano Temo que estás diciendo algo que no es cierto, la w3c nunca dice que no se pueda colocar una tabla dentro de otra, y precisamente anidado en un td es la única forma Ahora no deja de ser un código desastroso eso es cierto. En cuanto al problema, que código haz intentado? Debe ser Js, Jquery o Php? Commented el 7 mar. 2018 a las 19:49

2 respuestas 2

1

Puedes usar el selector de primer hijo de css: :first-child o :nth-child(1) y preguntar si tiene el valor igual al que necesitas y si es positivo, añadir una clase usando el selector .parent de jquery:

así:

var celda1ra = $('td:nth-child(1)');

celda1ra.each(function() {
    if ($(this).text() == '456') {
        $(this).parent().addClass('highlight');
    }
});

Acá un ejemplo visual:

$('td:nth-child(1)').each(function() {
    if ($(this).text() == '456') {
        $(this).parent().addClass('highlight');
    }
});
table, table *{
  border: solid 1px gray;
}

.highlight{
  background-color: yellow;
}
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<table>
 <tr>
   <td>456</td>
   <td>212</td>
   <td>87</td>
   <td>39</td>
 </tr>
 <tr>
   <td>25</td>
   <td>45</td>
   <td>978</td>
   <td>25</td>
 </tr>
 <tr>
   <td>87</td>
   <td>456</td>
   <td>98</td>
   <td>12</td>
 </tr>
</table>

Si te fijas, estoy preguntando por el valor 456 y aunque está ubicado en dos filas, solo me selecciona la fila cuando la primera celda es la que contiene el valor.

Ahora si tienes en la primera celda otras anidaciones o tablas, puedes usar el selector parents y especificar un criterio que se cumpla una sola vez, por ejemplo:

.parents('table').parents('tr')

Lo anterior significa que va a seleccionar el table ancestro más cercano y a partir de este, seleccionar un tr más cercano. Ejemplo:

$('td:first-child td').each(function() {
    if ($(this).text() == '456') {
        $(this).parents('table').parents('tr').addClass('highlight');
    }
});
table, table *{
  border: solid 1px gray;
}

.highlight{
  background-color: yellow;
}
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<table>
 <tr>
   <td>456</td>
   <td>212</td>
   <td>
    <table>
      <tr>
        <td>456</td>
        <td>25</td>
      </tr>
    </table>
   </td>
   <td>39</td>
 </tr>
 <tr>
   <td>25</td>
   <td>45</td>
   <td>978</td>
   <td>25</td>
 </tr>
 <tr>
   <td>
    <table>
      <tr>
        <td>456</td>
        <td>25</td>
      </tr>
    </table>
   </td>
   <td>87</td>
   <td>98</td>
   <td>12</td>
 </tr>
 <tr>
   <td>21</td>
   <td>768</td>
   <td>09</td>
   <td>356</td>
 </tr>
</table>

¿Es esto lo que necesitabas?

1
  • Muchas gracias, si funciona, y como haria para seleccionar todos los que cumplan la misma condicion, por ejemplo para marcar las dos fila que tienen '456' Commented el 8 mar. 2018 a las 5:05
0

Se me ocurre algo como agregar una clase a td e iterar sobre la clase, haciendo la búsqueda, algo así

$('.td_class').each(function(i, obj) {
    var val = $(this).text();
    if (val == "id") {
        $(this).css("background-color", "blue");
    }
}); 

creo que podría funcionar

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.