I have a table #mytable with 2 columns :
<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>
I also have a repeater subfield, with 2 subfields as well : "name" and "surname". I want to add a class to "#mytable tr" if the name AND surname are contained in the repeater.
I know how to check if one value is contained in one column of the repeater, but I don't know how to check for both values.
Here is what I have for one value :
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");
}
});
Thank you very much in advance !
So I think I understood your question correctly. Basically, we get a list of names and surnames from the table.
Then, we add an event listener on select so when one changes, we run a callback function.
Within this function, we get the name and surname values of the selects, then see if they exist in the names and surnames lists, then we get the tr with that name and surname using a filter and add a class to it.
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>One thing to note is that if you can, you should probably query data attributes rather than using the text value of the td within the tr.