Люди добрые. Помогите, а то скоро рехнусь :)

[dasha123]

Есть таблица в которой нужно фильтровать столбцы с помощью выпадающих списков.

<TABLE id = "filtertable">
<TR>
	<TD><label for="filterRaceRun">Select Race-run:</label><SELECT id = "filterRaceRun" onchange="tableSearchRun();" >
		<OPTION></OPTION>
		<OPTION>Zeitlauf</OPTION>
		<OPTION>Vorlauf</OPTION>
		<OPTION>Zwischenlauf</OPTION>
		<OPTION>Lauf</OPTION>
		<OPTION>Langstrecke</OPTION>
		<OPTION>Endlauf</OPTION>
	</SELECT></TD>
	<br>
	<TD><label for="filterRaceDay">Select Race-Day:</label><SELECT id = "filterRaceDay" onchange="tableSearchDay();">
		<OPTION></OPTION>
		<OPTION>Thursday, 27.06.2019</OPTION>
		<OPTION>Friday, 28.06.2019</OPTION>
		<OPTION>Saturday, 29.06.2019</OPTION>
		<OPTION>Sunday, 30.06.2019</OPTION>
	</SELECT></TD>
	<br>
	<TD><label for="filterRaceClass">Select Race-class:</label><INPUT  id = "filterRaceClass" onkeyup="tableSearchClass();" placeholder = "Search Race-class"/></TD>
</TR>
</TABLE>
</DIV>
<DIV id = "tablet">	
	<table id = "table_rennliste">
	<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>
    <tr>
        <td>1</td>
        <td><a href="http://philipp.imas-sport.com/Brandenburg/race.php?competition=wettkampf_206&race_id=1#oben" class="link">K1 200 Men</a></td>
        <td>Zeitlauf</td>
        <td>Thursday, 27.06.2019 - 18:00</td>
    </tr>
    <tr>
        <td>2</td>
        <td><a  href="http://philipp.imas-sport.com/Brandenburg/race.php?competition=wettkampf_206&race_id=2#oben" class="link" >K2 500 Woman</a></td>
        <td>Lauf</td>
        <td>Friday, 28.06.2019 - 9:00</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a  href="http://philipp.imas-sport.com/Brandenburg/race.php?competition=wettkampf_206&race_id=3#oben" >C1 1000 Junior</a></td>
        <td>Endlauf</td>
        <td>Saturday, 29.06.2019 - 8:40</td>
    </tr>
    <tr>
        <td>4</td>
        <td><a  href="http://philipp.imas-sport.com/Brandenburg/race.php?competition=wettkampf_206&race_id=4#oben" >C4 500 Woman</a></td>
        <td>Langstrecke</td>
        <td>Thursday, 27.06.2019 - 18:11</td>
    </tr>
    <tr>
        <td>5</td>
        <td><a  href="http://philipp.imas-sport.com/Brandenburg/race.php?competition=wettkampf_206&race_id=5#oben" >WC1 200 Man</a></td>
        <td>Langstrecke</td>
        <td>Friday, 28.06.2019 - 9:05</td>
    </tr>
	</table>
	</DIV>

function tableSearchRun() {
    var inwin = document.getElementById('filterRaceRun');
	var table = document.getElementById('table_rennliste');
    var regPhrase = new RegExp(inwin.value, 'i');
    var flag = false;
    for (var i = 1; i < table.rows.length; i++) {
        flag = false;
        for (var j = table.rows[i].cells.length - 1; j >= 0; j--) {
            flag = regPhrase.test(table.rows[i].cells[j].innerHTML);
            if (flag) break;
        }
        if (flag) {
            table.rows[i].style.display = "";
        } else {
            table.rows[i].style.display = "none";
        }

    
}
function tableSearchDay() {
    var inwin = document.getElementById('filterRaceDay');
    var table = document.getElementById('table_rennliste');
    var regPhrase = new RegExp(inwin.value, 'i');
    var flag = false;
    for (var i = 1; i < table.rows.length; i++) {
        flag = false;
        for (var j = table.rows[i].cells.length - 1; j >= 0; j--) {
            flag = regPhrase.test(table.rows[i].cells[j].innerHTML);
            if (flag) break;
        }
        if (flag) {
            table.rows[i].style.display = "";
        } else {
            table.rows[i].style.display = "none";
        }

    }
}
function tableSearchClass() {
    var inwin = document.getElementById('filterRaceClass');
    var table = document.getElementById('table_rennliste');
    var regPhrase = new RegExp(inwin.value, 'i');
    var flag = false;
    for (var i = 1; i < table.rows.length; i++) {
        flag = false;
        for (var j = table.rows[i].cells.length - 1; j >= 0; j--) {
            flag = regPhrase.test(table.rows[i].cells[j].innerHTML);
            if (flag) break;
        }
        if (flag) {
            table.rows[i].style.display = "";
        } else {
            table.rows[i].style.display = "none";
        }

    }
}

мне нужно чтобы каждый фильтр дополнял друг друга. а они взаимозаменяют. и поиск происходит не по конкретному слову из выпадающего списка, а по всей таблице. помогите пожалуйста.

[ksa]

мне нужно чтобы каждый фильтр дополнял друг друга. а они взаимозаменяют.

Так у тебя всегда идет анализ всех строк... А нужно тогда смотреть только видимые.

[dasha123]

Так у тебя всегда идет анализ всех строк... А нужно тогда смотреть только видимые.

я не понимаю как это реализовать

[ksa]

я не понимаю как это реализовать

У тебя есть циклы по строкам... Там нужно добавлять условия о видимости строки.
Так же нужно проверять не каждый фильтр в отдельности... А все разом, в одном цикле...

[dasha123]

У тебя есть циклы по строкам... Там нужно добавлять условия о видимости строки.
Так же нужно проверять не каждый фильтр в отдельности... А все разом, в одном цикле...

вроде на словах все понятно, а как в коде это реализовать..

[ksa]

а как в коде это реализовать..

Ты умеешь программировать на JS?

[dasha123]

Ты умеешь программировать на JS?

только начала..

[рони]

мне нужно чтобы каждый фильтр дополнял друг друга

что нужно, чтобы в строке были все параметры поиска или хотя бы один из параметров?

[Malleys]

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