Форум

louboutin · #1 (**permalink**) 26.04.2016, 11:00

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

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

Dilettante_Pro · #2 (**permalink**) 26.04.2016, 18:32

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

louboutin · #3 (**permalink**) 27.04.2016, 09:49

Сообщение от Dilettante_Pro

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

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

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

Dilettante_Pro · #4 (**permalink**) 27.04.2016, 12:56

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>

louboutin · #5 (**permalink**) 27.04.2016, 17:11

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

Dilettante_Pro · #6 (**permalink**) 27.04.2016, 17:51

Сообщение от louboutin

спасибо большое! а можете подкинуть скрипт с такой же сортировкой на чистом 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>

Форум

Справочник

Discord чат

Курсы javascript