Показать сообщение отдельно
  #9 (permalink)  
Старый 15.01.2020, 03:28
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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
Ответить с цитированием