dasha123, вам достаточно одной функции, которая будет фильтровать строки таблицы.
function filterTableRows() {
var table = document.getElementById("table_rennliste");
var raceRun = document.getElementById("filterRaceRun").value;
var raceDay = document.getElementById("filterRaceDay").value;
var raceClass = document.getElementById("filterRaceClass").value;
var raceClassPattern = new RegExp(escape(raceClass), "i");
for (var i = 0; i < table.tBodies[0].rows.length; i++) {
var row = table.tBodies[0].rows[i];
var isRowVisible = (
row.cells[2].textContent.includes(raceRun) &&
row.cells[3].textContent.startsWith(raceDay) &&
raceClassPattern.test(row.cells[1].textContent)
);
row.style.display = isRowVisible ? "" : "none";
}
function escape(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
}
В HTML вам нужно заменить...
- строку №3
<TD><label for="filterRaceRun">Select Race-run:</label><SELECT id = "filterRaceRun" onchange="tableSearchRun();" >
на
<TD><label for="filterRaceRun">Select Race-run:</label><SELECT id = "filterRaceRun" onchange="filterTableRows();" >
- строку №13
<TD><label for="filterRaceDay">Select Race-Day:</label><SELECT id = "filterRaceDay" onchange="tableSearchDay();">
на
<TD><label for="filterRaceDay">Select Race-Day:</label><SELECT id = "filterRaceDay" onchange="filterTableRows();">
- строку № 21
<TD><label for="filterRaceClass">Select Race-class:</label><INPUT id = "filterRaceClass" onkeyup="tableSearchClass();" placeholder = "Search Race-class"/></TD>
на
<TD><label for="filterRaceClass">Select Race-class:</label><INPUT id = "filterRaceClass" oninput="filterTableRows();" placeholder = "Search Race-class"/></TD>
Обратите внимание — событие onkeyup заменено на oninput, чтобы обрабатывался ввод любым способом.
- строки №27–30
<TH id = "table_rennliste_race_no_h"><A>Race-number</A></TH>
<TH id = "table_rennliste_race_class_h"><A>Race-class</A></TH>
<TH id = "table_rennliste_race_run_h"><A>Race-run</A></TH>
<TH id = "table_rennliste_race_start_h"><A>Planned start</A></TH>
оберните в элемент <thead>
<thead>
<TH id = "table_rennliste_race_no_h"><A>Race-number</A></TH>
<TH id = "table_rennliste_race_class_h"><A>Race-class</A></TH>
<TH id = "table_rennliste_race_run_h"><A>Race-run</A></TH>
<TH id = "table_rennliste_race_start_h"><A>Planned start</A></TH>
</thead>
Пример целиком можно посмотреть тут —
https://codepen.io/Malleys/pen/jOEpGEm?editors=1010