JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<table id="tabCity">
<tr>
<td>Name</td>
<td>Surname</td>
<td>City</td>
</tr>
<tr>
<td>Paul</td>
<td color>Smith</td>
<td>Boston</td>
</tr>
<tr>
<td>Andrew</td>
<td>Smith</td>
<td>London</td>
</tr>
<tr>
<td>Smith</td>
<td>Green</td>
<td>Boston</td>
</tr>
<tr>
<td>Nick</td>
<td>Smith</td>
<td>Boston</td>
</tr>
</table>
<br>
<button class="go">Search Surname Smith in Boston</button>
<br>
<label>The result must be 2</label>
CSS
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
}
JavaScript
$(document).on('click', '.go', function() {
var rows = $("#tabCity tr").filter(function() {
return $(this).find("td:nth-child(2):contains('Smith')").length
&& $(this).find("td:nth-child(3):contains('Boston')").length;
});
rows.css('background-color', 'yellow');
});