1

No consigo seleccionar cierto rango de td para toda la tabla en jquery.

O lo que es lo mismo, Busco pintar/capturar todas las celdas de todas las filas excepto las celdas de la última columna, pero no se porque solo funciona con la primera fila.

Digo jquery porque creo que es lo más rapido, pero si alguien sabe hacerlo en ES sin complicarse casi que mejor.

$(document).ready(function(){

  $('tr td:lt(2)').css("background-color", "yellow");
  
  $("table").on('click','tr td:lt(2)', function() {
    console.log(this)
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
 <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
</table>

2
  • No logro terminar de entender lo que querés hacer. Ejecuté tu codigo y pinto correctamente un cierto rango de td. Lo que buscas es que se pinten todas las filas hasta un cierto rango?
    – andres
    Commented el 7 ago. 2020 a las 12:36
  • 1
    Busco pintar/capturar todas las celdas de todas las filas excepto las celdas de la última columna, pero no se porque solo funciona con la primera fila.
    – Takyo
    Commented el 7 ago. 2020 a las 12:38

2 respuestas 2

1

Tu solución $('tr td:lt(2)').css("background-color", "yellow"); no funciona porque estas seleccionando solo las celdas(td) que tengan el índice menor de 2. Como tienes 3 celdas pues solo te pinta las 2 primeras(índices 0 y 1).

Para seleccionar el rango de celdas que dices puedes usar el siguiente selector.

table tr:not(:last-child) td: selecciona todos los elementos td de todas las filas (tr) y que la fila no sea la última(:not(:last-child)).

Con jquery

$('.table tr:not(:last-child) td').css("background-color", "yellow");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" border="1">
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
 <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
</table>

Javascript vanilla(puro)

// se recorren todos los tds y se les cambia el estilo
// javascript puro no tiene un método como elem.css() de jquery

document.querySelectorAll('.table tr:not(:last-child) td').forEach(celda => celda.style.backgroundColor = 'yellow');
<table class="table" border="1">
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
 <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
</table>

6
  • Creo que me he explicado mal, busco seleccionar cierto rango de columnas (td) y no filas (tr). en este ejemplo que he puesto es seleccionar todo excepto la columna de ciudades
    – Takyo
    Commented el 7 ago. 2020 a las 13:07
  • vaya. Tiene que ser con lt y gt o se pueden otros selectores?
    – hawks
    Commented el 7 ago. 2020 a las 13:12
  • Siguiendo con el código de @hawks lográs eso cambiando por $('.table tr td:not(:last-child)').css("background-color", "yellow");
    – andres
    Commented el 7 ago. 2020 a las 13:13
  • 2
    @andres ya iba a actualizar la respuesta con eso. Pero como en el título pone con los selectores lt y gt pues mejor que diga algo el OP
    – hawks
    Commented el 7 ago. 2020 a las 13:15
  • 1
    Efectivamente tu solución es buena si corriges tal como dice @andres, no obstante al final lo he solucionado con find() o con los selectores nth-child. He publicado mi solución.
    – Takyo
    Commented el 7 ago. 2020 a las 17:27
0

Finalmente he encontrado la solución con el método find de jquery y tambien con los selectores puros de css

Me he dado cuenta que cuando se hace tr td:gt(1):lt(3) lo hace sobre la tabla y no por cada tr que es lo que buscaba. En las dos primeras tablas de ejemplos se ve claramente.

Para finalmente solucionarlo con $('#tabla tr').find('td:gt(1):lt(3)') he incluso con selectores puros css que supongo que valdrá para javascript puro $('#tabla td:nth-child(n+3):nth-child(-n+5)')

$(document).ready(function(){

  $('#t1 tr td:gt(1):lt(3)').css("background-color", "yellow");
  $('#t2 tr td:gt(4)').css("background-color", "yellow");
  
  $('#t3 tr').find('td:gt(1):lt(3)').css("background-color", "yellow");
  
  $('#t4 td:nth-child(n+3):nth-child(-n+5)').css("background-color", "yellow");
  
  $("table").on('click','tr td:lt(2):lt(3)', function() {
    console.log(this)
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
#t1 tr td:gt(1):lt(3)
<table id="t1" border="1"><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr></table>
<br>
#t2 tr td:gt(4)
<table id="t2" border="1"><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr></table>
<br>
lo deseado $('#t3 tr').find('td:gt(1):lt(3)')
<table id="t3" border="1"><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr></table>
<br>
Alternativa $('#t4 td:nth-child(n+3):nth-child(-n+5)')
<table id="t4" border="1"><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr></table>

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.