JSFiddle - React, Tailwind, and code Playground
HTML
<table class="table">
<tr class="firstrow">
<th colspan="3">Values to find</th>
<th> </th>
<th>Presence</th>
<th> </th>
<th colspan="4">Data table</th>
</tr>
<tr>
<td>1</td>
<td>12</td>
<td>13</td>
<td> </td>
<td></td>
<td> </td>
<td>f</td>
<td>g</td>
<td>d</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
<td>12</td>
<td>g</td>
<td>13</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td> </td>
<td> </td>
<td> </td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>6</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
<td> </td>
<td> </td>
<td> </td>
<td>4</td>
<td>2</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>3</td>
<td>10</td>
<td>b</td>
<td> </td>
<td> </td>
<td> </td>
<td>3</td>
<td>10</td>
<td>f</td>
<td>k</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td></td>
</tr>
</table>
CSS
.table.table {
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}
.table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
width: 40px;
}
.table th {
background-color: #E99D79;
color: #FFF;
font-weight: bold;
}
.yes {
background: green;
}
.no {
background: red;
}
JavaScript
var trs = $('table').find('tr')
var gethtml = function () {
return $(this).html()
}
var rows = [];
trs.each(function () {
var values = $(this).find('td').slice(6).map(gethtml).get();
rows.push(values);
});
var match = function(row) {
var ids = this.map(function(v){
return row.indexOf(v);
})
var min = Math.min.apply(null,ids);
var max = Math.max.apply(null,ids);
return (min > -1) && (max-min >= 3);
}
trs.each(function () {
var tds = $(this).find('td').slice(0,3);
var values = $(this).find('td').slice(0,3).map(gethtml).get();
var output = $(this).find('td').eq(4);
var isMatch = rows.some(match.bind(values));
output.addClass(isMatch ? 'yes' : 'no');
});