Есть ли готовое решение по работе с данными в таблице на странице на JS?

Question

[keslo]

Добрый день, господа!
Подскажите, есть ли готовое решение по работе с данными в таблице на странице на JS?
Что мне необходимо:

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

Может что на Гите завалялось?

Comments

[keslo]

Спасибо всем! Нашел простейшее и универсальное решение:

<script type="text/javascript">
    function filter2 (phrase, _id){
        var words = phrase.value.toLowerCase().split(" "); 
        var table = document.getElementById(_id); 
        for (var r = 1; r < table.rows.length; r++){ 
            var cellsV = table.rows[r].cells[0].innerHTML.replace(/<[^>]+>/g,""); //указать первый столбец
            var displayStyle = 'none';
            for (var i = 0; i < words.length; i++) {
            if (cellsV.toLowerCase().indexOf(words[i])>=0)
                displayStyle = ''; 
            else {
                displayStyle = 'none'; 
                break;
            }
            }
        table.rows[r].style.display = displayStyle; 
        }
    }
  </script>
<h4>Введите наименование запчасти для фильтрации каталога:</h4>
<input name="filt" onkeyup="filter2(this, 'sf')" style="width:350px;" type="text" />

Может кому пригодиться!

Answer 1

[keslo]

Спасибо всем! Нашел простейшее и универсальное решение:

<script type="text/javascript">
    function filter2 (phrase, _id){
        var words = phrase.value.toLowerCase().split(" "); 
        var table = document.getElementById(_id); 
        for (var r = 1; r < table.rows.length; r++){ 
            var cellsV = table.rows[r].cells[0].innerHTML.replace(/<[^>]+>/g,""); //указать первый столбец
            var displayStyle = 'none';
            for (var i = 0; i < words.length; i++) {
            if (cellsV.toLowerCase().indexOf(words[i])>=0)
                displayStyle = ''; 
            else {
                displayStyle = 'none'; 
                break;
            }
            }
        table.rows[r].style.display = displayStyle; 
        }
    }
  </script>
<h4>Введите наименование запчасти для фильтрации каталога:</h4>
<input name="filt" onkeyup="filter2(this, 'sf')" style="width:350px;" type="text" />

Может кому пригодиться!

Answer 2

[Макс]

tablesorter.com/docs
mottie.github.io/tablesorter/docs/example-widget-b...