Tengo una tabla #mytable con 2 columnas:
<table id="#mytable"> <tr><td class="name">John</td><td class="surname">Smith</td></tr> <tr><td class="name">Paul</td><td class="surname">Jackson</td></tr> <tr><td class="name">Mary</td><td class="surname">Jane</td></tr> </table>También tengo un subcampo repetidor, con 2 subcampos también: "nombre" y "apellido". Quiero agregar una clase a "#mytable tr" si el nombre Y el apellido están contenidos en el repetidor.
Sé cómo verificar si un valor está contenido en una columna del repetidor, pero no sé cómo verificar ambos valores.
Esto es lo que tengo para un valor:
jQuery.each($('#mytable tr .name'), function () { var line = $(this).closest("tr"); var name = this.textContent; var namesrepeater = $('#myrepeater .namesrepeater select option:selected').map(function() { return $(this).text();}).get().join(','); if (namesrepeater.includes(name)) { line.addClass("yes"); } });Muchas gracias por adelantado !
Así que creo que entendí bien tu pregunta. Básicamente, obtenemos una lista de nombres y apellidos de la tabla.
Luego, agregamos un detector de eventos en la select para que cuando uno cambie, ejecutemos una función de devolución de llamada.
Dentro de esta función, obtenemos los valores de nombre y apellido de las selecciones, luego vemos si existen en las listas de nombres y apellidos, luego obtenemos el tr con ese nombre y apellido usando un filtro y le agregamos una clase.
const names = [] const surnames = [] // Build a list of names and surnames $('#mytable tr').each(function () { const name = $(this).find('.name').text() const surname = $(this).find('.surname').text() names.push(name) surnames.push(surname) }) // Add an event listener for when a select changes $('select').on('change', (e) => { // remove all of the classes because none of them may be valid any more $('.red').removeClass('red') const name = $('#name').find('option:selected').val() const surname = $('#surname').find('option:selected').val() // If the name and surname appear in the list of names and surnames if (names.indexOf(name) > -1 && surnames.indexOf(surname) > -1) { // filter out all of the tr's so we only get the one with the name and surname inside const tr = $('tr').filter(function () { return $(this).find('.name').text() === name && $(this).find('.surname').text() === surname }) // add the class tr.addClass('red') } }) tr.red { background: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="mytable"> <tr><td class="name">John</td><td class="surname">Smith</td></tr> <tr><td class="name">Paul</td><td class="surname">Jackson</td></tr> <tr><td class="name">Mary</td><td class="surname">Jane</td></tr> <tr><td class="name">John</td><td class="surname">Paul</td></tr> </table> <select id="name"> <option></option> <option value="John">John</option> <option value="Paul">Paul</option> </select> <select id="surname"> <option></option> <option value="Smith">Smith</option> <option value="Paul">Paul</option> </select> Una cosa a tener en cuenta es que, si puede, probablemente debería consultar los atributos de datos en lugar de usar el valor de texto de td dentro de tr .