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

Вот фильтрующая часть скрипта:

function searchPokemon() {
    
            var input, filter, found, table, tr, td, i, j;
            input = document.getElementById("mySearch");
            filter = input.value.toUpperCase();
            table = document.getElementById("pokemons-list");
            tr = table.getElementsByTagName("tr");
            
            for (i = 0; i < tr.length; i++) {
        
                td = tr[i].getElementsByTagName("td");
    
                for (j = 0; j < td.length; j++) {
            
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                
                        found = true;
                    }
                }
                
                if (found) {
            
                    tr[i].style.display = "";
                    found = false;
                } else {
            
                    tr[i].style.display = "none";
                }
            }
        }

А вот и табличная навигационная часть:

var rows = document.getElementById("pokemons-list").children[1].children;
        var selectedRow = 0;
        
        document.body.onkeydown = function(e){
    
            rows[selectedRow].style.backgroundColor = "#FFFFFF";

            if(e.keyCode == 38){
                selectedRow--;
            } else if(e.keyCode == 40){
                selectedRow++;
            } else if(e.keyCode == 13){
                Pokemon_ID = selectedRow + 1;
                alert('Pokemon_ID = ' + Pokemon_ID);
            }
            if(selectedRow >= rows.length){
                selectedRow = 0;
            } else if(selectedRow < 0){
                selectedRow = rows.length-1;
            }
            
            rows[selectedRow].style.backgroundColor = "dodgerblue";

            rows[selectedRow].scrollIntoView(true);
        
        };
0
Nas 3 Июн 2018 в 01:54

1 ответ

Лучший ответ

Ниже приведен базовый пример того, что вы пытаетесь сделать. Запустите фрагмент кода и введите «Aa» (без кавычек). Обратите внимание, когда вы нажимаете стрелку вниз, вы сразу получаете первый Aa, но затем вам нужно нажать еще 3 раза, прежде чем будет выделена следующая строка. Следующие две стрелки вниз действительно относятся к скрытым элементам tr. Элементы скрыты от показа пользователю, но они все еще находятся в самой DOM.

Решение: во время события onkeydown, прежде чем вы измените цвет фона на dodgerblue, убедитесь, что текущий элемент tr не имеет display none. Если это так, повторите цикл еще раз и проверьте следующий ожидаемый результат. Поскольку у вас есть цикл, до тех пор, пока вы не вернетесь за пределы того места, где вы начали, у вас не должно быть бесконечного цикла.

var searchPokemon;
var rows = document.getElementById("pokemons-list").children[1].children;
var selectedRow = 0;

document.body.onkeydown = function(e) {  
  rows[selectedRow].style.backgroundColor = "#FFFFFF";
  
  if(e.keyCode == 38){
    selectedRow--;
  } else if(e.keyCode == 40){
    selectedRow++;
  } else if(e.keyCode == 13){
    Pokemon_ID = selectedRow + 1;
    alert('Pokemon_ID = ' + Pokemon_ID);
  }
  
  if(selectedRow >= rows.length){
    selectedRow = 0;
  } else if(selectedRow < 0){
    selectedRow = rows.length-1;
  }
  
  rows[selectedRow].style.backgroundColor = "dodgerblue";
  
  rows[selectedRow].scrollIntoView(true);
  
};
        
        searchPokemon = function() {
    
            var input, filter, found, table, tr, td, i, j;
            input = document.getElementById("mySearch");
            filter = input.value.toUpperCase();
            table = document.getElementById("pokemons-list");
            tr = table.getElementsByTagName("tr");
            
            for (i = 0; i < tr.length; i++) {
        
                td = tr[i].getElementsByTagName("td");
    
                for (j = 0; j < td.length; j++) {
            
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                
                        found = true;
                    }
                }
                
                if (found) {
            
                    tr[i].style.display = "";
                    found = false;
                } else {
            
                    tr[i].style.display = "none";
                }
            }
        }
<html>
<head>
</head>
<body>
<input id="mySearch" />
<button type="button" onclick="searchPokemon()">Filter</button>
<table id="pokemons-list"> 
	<thead> </thead> 
	<tbody> 
		<tr style="background-color: rgb(255, 255, 255);">
			<td>1</td>
			<td>Aaa</td><td>
			<img src=""></td>
		</tr>
    <tr style="background-color: rgb(255, 255, 255);">
			<td>2</td>
			<td>Aba</td><td>
			<img src=""></td>
		</tr>
    <tr style="background-color: rgb(255, 255, 255);">
			<td>3</td>
			<td>Abb</td><td>
			<img src=""></td>
		</tr>
     <tr style="background-color: rgb(255, 255, 255);">
			<td>4</td>
			<td>Aab</td><td>
			<img src=""></td>
		</tr>
  </tbody>
 </table>
</body>
</html>

Приведенный ниже фрагмент необходимо обновить, чтобы вы могли выполнить тот же тест, но пропустить скрытые элементы tr.

var searchPokemon;
var rows = document.getElementById("pokemons-list").children[1].children;
var selectedRow = 0;

document.body.onkeydown = function (e) {
	rows[selectedRow].style.backgroundColor = "#FFFFFF";

	var startedAt;

	do {
		startedAt = selectedRow;
		
		if (e.keyCode == 38) {
			selectedRow--;
		} else if (e.keyCode == 40) {
			selectedRow++;
		} else if (e.keyCode == 13) {
			Pokemon_ID = selectedRow + 1;
			alert('Pokemon_ID = ' + Pokemon_ID);
		}

		if (selectedRow >= rows.length) {
			selectedRow = 0;
		} else if (selectedRow < 0) {
			selectedRow = rows.length - 1;
		}
		
	} while (startedAt != selectedRow && rows[selectedRow].style.display === 'none');

	rows[selectedRow].style.backgroundColor = "dodgerblue";
};

searchPokemon = function () {
	var input, filter, found, table,	tr, td, i, j;
	input = document.getElementById("mySearch");
	filter = input.value.toUpperCase();
	table = document.getElementById("pokemons-list");
	tr = table.getElementsByTagName("tr");

	for (i = 0; i < tr.length; i++) {
		td = tr[i].getElementsByTagName("td");

		for (j = 0; j < td.length; j++) {
			if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
				found = true;
			}
		}

		if (found) {
			tr[i].style.display = "";
			found = false;
		} else {
			tr[i].style.display = "none";
		}
	}
}
<html>
<head>
</head>
<body>
<input id="mySearch" />
<button type="button" onclick="searchPokemon()">Filter</button>
<table id="pokemons-list"> 
	<thead> </thead> 
	<tbody> 
		<tr style="background-color: rgb(255, 255, 255);">
			<td>1</td>
			<td>Aaa</td><td>
			<img src=""></td>
		</tr>
    <tr style="background-color: rgb(255, 255, 255);">
			<td>2</td>
			<td>Aba</td><td>
			<img src=""></td>
		</tr>
    <tr style="background-color: rgb(255, 255, 255);">
			<td>3</td>
			<td>Abb</td><td>
			<img src=""></td>
		</tr>
     <tr style="background-color: rgb(255, 255, 255);">
			<td>4</td>
			<td>Aab</td><td>
			<img src=""></td>
		</tr>
  </tbody>
 </table>
</body>
</html>
1
Esaith 4 Июн 2018 в 18:43