Javascript-форум - элементарный скрипт: фильтрация таблицы

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - элементарный скрипт: фильтрация таблицы (https://javascript.ru/forum/dom-window/62729-ehlementarnyjj-skript-filtraciya-tablicy.html)

элементарный скрипт: фильтрация таблицы

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

<option value='адын'>№ 1</option>
<option value='два'>№ 2</option>
<option value='три'>№ 3</option>

louboutin,
Это не таблица, а опшены от селекта
https://webref.ru/html/select

Цитата:

Сообщение от Dilettante_Pro (Сообщение 415075)

louboutin,
Это не таблица, а опшены от селекта

да,это html-селект.
а нужен скрипт, чтобы фильтровать таблицу с помощью выбора опций селекта.

таблица обычная
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>

louboutin,
Ну так вопросы надо задавать, а не загадки загадывать

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
</head>
<style>
   table 
   { border-collapse: collapse; }
   td  
   {   padding: 3px;
       border: 1px solid black;
        }    
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(function () {
        $('#filter').on('change', function () {
            var filter = $(this).val();
            $('table tr').each(function (indx) {
                var exist;
                $(this).find('td').each(function (ind) {
                    exist = exist || ($(this).text() == filter || filter=='');
                });
                if (exist) { $(this).css('display', 'table-row') }
                else { $(this).css('display', 'none') };
            });
        });
    });
</script>
<body>
    <div>
        Фильтр
        <select id='filter'>
            <option value='' selected>Без фильтра</option>
            <option value='адын'>№ 1</option>
            <option value='два'>№ 2</option>
            <option value='три'>№ 3</option>
        </select>
    </div>
  <table>
    <tr><td>адын</td><td>Что-то</td><td>Что-то</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>Что-то</td><td>Что-то</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>три</td><td>Что-то</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>Что-то</td><td>Что-то</td><td>адын</td></tr>
    <tr><td>Что-то</td><td>Что-то</td><td>Что-то</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>адын</td><td>два</td><td>три</td></tr>
    <tr><td>Что-то</td><td>Что-то</td><td>Что-то</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>три</td><td>три</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>Что-то</td><td>адын</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>два</td><td>Что-то</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>Что-то</td><td>два</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>два</td><td>Что-то</td><td>Что-то</td></tr>
  </table>
</body>
</html>

спасибо большое! а можете подкинуть скрипт с такой же сортировкой на чистом JS ?

Цитата:

Сообщение от louboutin (Сообщение 415158)

спасибо большое! а можете подкинуть скрипт с такой же сортировкой на чистом JS ?

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
</head>
<style>
   table 
   { border-collapse: collapse; }
   td  
   {   padding: 3px;
       border: 1px solid black;
        }    
</style>

<script>
    window.addEventListener("DOMContentLoaded", function () {
        document.getElementById('filter').onchange = function () {
            var filter = this.value,
                rows = document.querySelectorAll('table tr');
            for (var i = 0; i < rows.length; i++) {
                var exist = false,
                       cells = rows[i].querySelectorAll('td');
                for (var j = 0; j < cells.length; j++) {
                    exist = exist || (cells[j].innerText == filter || filter == '');
                };
                if (exist) { rows[i].style.display = 'table-row' }
                else { rows[i].style.display = 'none' };
            };
        };
    });
</script>
<body>
    <div>
        Фильтр
        <select id='filter'>
            <option value='' selected>Без фильтра</option>
            <option value='адын'>№ 1</option>
            <option value='два'>№ 2</option>
            <option value='три'>№ 3</option>
        </select>
    </div>
  <table>
    <tr><td>адын</td><td>Что-то</td><td>Что-то</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>Что-то</td><td>Что-то</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>три</td><td>Что-то</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>Что-то</td><td>Что-то</td><td>адын</td></tr>
    <tr><td>Что-то</td><td>Что-то</td><td>Что-то</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>адын</td><td>два</td><td>три</td></tr>
    <tr><td>Что-то</td><td>Что-то</td><td>Что-то</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>три</td><td>три</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>Что-то</td><td>адын</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>два</td><td>Что-то</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>Что-то</td><td>два</td><td>Что-то</td></tr>
    <tr><td>Что-то</td><td>два</td><td>Что-то</td><td>Что-то</td></tr>
  </table>
</body>
</html>