I have a table that represents the reservations, the detail is when I look for the room (s), the filter does not respect the <th> .
How would you make the filter just take the rows of body of the table in javascript .
function doSearch() {
var tableReg = document.getElementById('regTable');
var searchText = document.getElementById('searchTerm').value.toLowerCase();
for (var i = 1; i < tableReg.rows.length; i++) {
var cellsOfRow = tableReg.rows[i].getElementsByTagName('td');
var found = false;
for (var j = 0; j < cellsOfRow.length && !found; j++) {
var compareWith = cellsOfRow[j].innerHTML.toLowerCase();
if (searchText.length == 0 || (compareWith.indexOf(searchText) > -1)) {
found = true;
}
}
if (found) {
tableReg.rows[i].style.display = '';
} else {
tableReg.rows[i].style.display = 'none';
}
}
}.reserva {
background-color: #f66a6a;
color: #f66a6a
}<input id="searchTerm" onkeyup="doSearch()" name="buscar" placeholder="Buscar habitacion" type="text" >
<table border="1" id="regTable" >
<thead>
<tr>
<th class="text-center" colspan="20">
Reservas - Enero 2019 del 1-10
</th>
</tr>
<tr>
<th>habitacion</th>
<th>1</th>
<th colspan="2">2</th>
<th colspan="2">3</th>
<th colspan="2">4</th>
<th colspan="2">5</th>
<th colspan="2">6</th>
<th colspan="2">7</th>
<th colspan="2">8</th>
<th colspan="2">9</th>
<th colspan="2">10</th>
</tr>
</thead>
<tbody>
<tr>
<td>101-simple</td>
<td class="reserva" colspan="6"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td class="reserva" colspan="4"></td>
<td class="reserva" colspan="3"></td>
</tr>
<tr>
<td>102-simple</td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="4" class="reserva"></td>
<td colspan="2"></td>
<td class="reserva" colspan="4"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td>103-doble</td>
<td class="reserva" colspan="4"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td class="reserva" colspan="6"></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td>104-Triple</td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td class="reserva" colspan="4"></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td>101-Matrimonial</td>
<td colspan="2"></td>
<td colspan="2"></td>
<td class="reserva" colspan="4"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td class="reserva" colspan="5"></td>
</tr>
</tbody>
</table>