Фильтр таблицы. Как удалить элемент из массива?
Изучаю JavaScript.
Решил создать фильтр для таблицы, неопределенного размера (наподобие того что есть в Excel). Не удается удалить параметр из массива. После первого клика по фильтру, параметр успешно добавляется в массив (добавление параметров вроде бы работает), второй щелчок по этому же параметру удаляет его из массива, но остается длинна i-того массива равной единице. Последующие щелчки в этом же столбце творят ужас. Не пойму что я делаю не правильно. Подскажите пожалуйста как решить данную проблему. Вот сам код, который подробно прокомментировал: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang="ru"> <meta charset="UTF-8"> <title>First</title> <link rel="stylesheet" href="style.css"/> <style> table { border-collapse: collapse; font-family: "Arial", sans-serif; font-size: 0.9em; margin: 50px; position: relative; } td { border: 1px solid black; width: 150px; padding: 5px; } thead { background-color: coral; font-weight: bold; } .select-group { font-weight: normal; font-style: italic; display: none; position: absolute; background-color: burlywood; width: 150px; padding: 5px; border: 1px solid black; top: 33px; } td:hover > .select-group { display: block; } thead:hover { cursor: pointer; } .second-name { left: 0; } .first-name { left: 161px; } .otch { left: 322px; } .select-item { padding: 5px 0; border-bottom: 1px solid black; } .select-item:hover { background-color: darkkhaki; } span { background-color: #fff; padding: 3px; width: 144px; display: block; } label { display: block; } </style> <script type="text/javascript"> var selectGroup = document.getElementsByClassName("select-group"), tr = document.querySelectorAll("tbody tr"), tHead = document.getElementsByTagName("thead"), colParam = new Array(selectGroup.length),// массив в котором будут храниться параметры выбора numParam = 0; function show() { // переберем блоки с input'ами for (var i = 0; i < selectGroup.length; i++) { // теперь переберем сами input'ы в этих блоках for (var j = 0; j < selectGroup[i].querySelectorAll("input").length; j++) { //создадим переменную в которой будет хранится один input var hasChecked = selectGroup[i].querySelectorAll("input")[j]; //если input выбран if (hasChecked.checked) { то если массив с параметрами пуст if (colParam[i] == undefined || colParam[i].length == 0) { /*то создадим i-тым (i - это номер столбца) элементом массив в который занесем значение выбранного input'а*/ colParam[i] = new Array(hasChecked.value); } else { //если массив с параметрами не пуст, то переберем его for (var r = 0; r < colParam[i].length; r++) { if (colParam[i][r] != hasChecked.value) { /* r - номер параметрам в i-том столбце и если значения выбранного input'а нет в массиве с параметрами, то заносим это значение*/ colParam[i].push(hasChecked.value); } else { break; } } } } else { /*вот тут у меня и начинается беда Проверяем не пуст ли массив с параметрами */ if (colParam[i] != undefined) { //если не пуст то переберем все его значения for (var v = 0; v < colParam[i].length; v++) { if (colParam[i][numParam] == hasChecked.value) { // и если значение есть в массиве, то удаляем его colParam[i].splice(v, 1); } else { break; } } } else { break; } } } } } //Функция запускается по клику на шапке таблицы tHead[0].addEventListener("click", show); </script> </head> <body> <table> <thead> <tr> <td> <span>Фамилия</span> <div class="select-group second-name"> <label><input class="select-item col11" type="checkbox" value="Епихин">Епихин</label> <label><input class="select-item col11" type="checkbox" value="Буртовой">Буртовой</label> </div> </td> <td> <span>Имя</span> <div class="select-group first-name"> <label><input class="select-item col11" type="checkbox" value="Александр">Александр</label> <label><input class="select-item col11" type="checkbox" value="Евгений">Евгений</label> <label><input class="select-item col11" type="checkbox" value="Сергей">Сергей</label> </div> </td> <td> <span>Отчество</span> <div class="select-group otch"> <label><input class="select-item col11" type="checkbox" value="Валерьевич">Валерьевич</label> <label><input class="select-item col11" type="checkbox" value="Олегович">Олегович</label> <label><input class="select-item col11" type="checkbox" value="Анатольевич">Анатольевич</label> </div> </td> </tr> </thead> <tbody> <tr> <td class="col1">Епихин</td> <td class="col2">Александр</td> <td class="col3">Валерьевич</td> </tr> <tr> <td class="col1">Буртовой</td> <td class="col2">Евгений</td> <td class="col3">Олегович</td> </tr> <tr> <td class="col1">Епихин</td> <td class="col2">Александр</td> <td class="col3">Анатольевич</td> </tr> <tr> <td class="col1">Епихин</td> <td class="col2">Сергей</td> <td class="col3">Валерьевич</td> </tr> <tr> <td class="col1">Буртовой</td> <td class="col2">Александр</td> <td class="col3">Олегович</td> </tr> </tbody> </table> </body> </html> P.S. Если не правильно или неудобно оформил тему то скажите как исправить. |
leshiple,
строка 140 цикл в никуда??? 145 для удаления есть splice |
Цитата:
мой вариант на сон грядущий, код жутковат, но вроде бы работает :) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang="ru"> <meta charset="UTF-8"> <title>First</title> <link rel="stylesheet" href="style.css"/> <style> table { border-collapse: collapse; font-family: "Arial", sans-serif; font-size: 0.9em; margin: 50px; position: relative; } td { border: 1px solid black; width: 150px; padding: 5px; } thead { background-color: coral; font-weight: bold; } .select-group { font-weight: normal; font-style: italic; display: none; position: absolute; background-color: burlywood; width: 150px; padding: 5px; border: 1px solid black; top: 33px; } td:hover > .select-group { display: block; } thead:hover { cursor: pointer; } .second-name { left: 0; } .first-name { left: 161px; } .otch { left: 322px; } .select-item { padding: 5px 0; border-bottom: 1px solid black; } .select-item:hover { background-color: darkkhaki; } span { background-color: #fff; padding: 3px; width: 144px; display: block; } label { display: block; } </style> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { function closest (elem, selector) { while (elem && elem.tagName != selector) { elem = elem.parentNode; } return elem; } Array.prototype.map.call(document.querySelector("table").querySelectorAll("input[type=checkbox"), function (inp) { inp.checked = true; }); document.querySelector("table").addEventListener("click", function (event) { var target = event.target; if ( target.type && target.type == "checkbox" ) { var td = closest(target, "TD"); var index = td.cellIndex; var inps = td.querySelectorAll("input:checked"); var vals = Array.prototype.map.call(inps, function (inp) { return inp.value; }); var trs = this.querySelector("tbody").querySelectorAll("tr"); Array.prototype.map.call(trs, function (tr ) { if ( !tr.isHiddenByCol ) tr.isHiddenByCol = []; if ( vals.indexOf(tr.cells[index].innerHTML) == -1 ) { tr.style.display = "none"; if ( tr.isHiddenByCol.indexOf(index) == -1 ) tr.isHiddenByCol.push(index); } else if ( tr.isHiddenByCol.indexOf(index) != -1 ) { tr.isHiddenByCol.splice(tr.isHiddenByCol.indexOf(index), 1); if ( tr.isHiddenByCol.length == 0 ) { tr.style.display = ""; } } }); } }); }); </script> </head> <body> <table> <thead> <tr> <td> <span>Фамилия</span> <div class="select-group second-name"> <label><input class="select-item col11" type="checkbox" value="Епихин">Епихин</label> <label><input class="select-item col11" type="checkbox" value="Буртовой">Буртовой</label> </div> </td> <td> <span>Имя</span> <div class="select-group first-name"> <label><input class="select-item col11" type="checkbox" value="Александр">Александр</label> <label><input class="select-item col11" type="checkbox" value="Евгений">Евгений</label> <label><input class="select-item col11" type="checkbox" value="Сергей">Сергей</label> </div> </td> <td> <span>Отчество</span> <div class="select-group otch"> <label><input class="select-item col11" type="checkbox" value="Валерьевич">Валерьевич</label> <label><input class="select-item col11" type="checkbox" value="Олегович">Олегович</label> <label><input class="select-item col11" type="checkbox" value="Анатольевич">Анатольевич</label> </div> </td> </tr> </thead> <tbody> <tr> <td class="col1">Епихин</td> <td class="col2">Александр</td> <td class="col3">Валерьевич</td> </tr> <tr> <td class="col1">Буртовой</td> <td class="col2">Евгений</td> <td class="col3">Олегович</td> </tr> <tr> <td class="col1">Епихин</td> <td class="col2">Александр</td> <td class="col3">Анатольевич</td> </tr> <tr> <td class="col1">Епихин</td> <td class="col2">Сергей</td> <td class="col3">Валерьевич</td> </tr> <tr> <td class="col1">Буртовой</td> <td class="col2">Александр</td> <td class="col3">Олегович</td> </tr> </tbody> </table> </body> </html> |
рони,
Спасибо за подсказку. В строках 117 и 140 были циклы в никуда. Исправил. Невнимательность и запутался в коде. В строке 145 delete заменил на splice. bes, Спасибо за критику. А как его сделать менее жутковатым? Каждое действие сделать отдельной функцией, и в функции show() вызывать их? Или использовать другие конструкции? |
Цитата:
как сделать менее жутковатым - оптимизировать, например, у меня заменить this.querySelector("tbody").querySelectorAll("tr");на this.querySelectorAll("tbody tr"); + важна сама идея вычислений, моя чую не совсем хороша :) |
bes,
Можете свой код показать? |
Цитата:
|
bes,
Туплю. Можешь вкратце прокомментировать свой код? Я не совсем понимаю как он работает. |
Цитата:
для хранения информации о том, что строка скрыта посредством фильтра в определённом столбце, для неё задаётся свойство-массив, в котором хранятся индексы этих столбцов, если индекса столбца в этом свойстве-массиве строки нет, то фильтр этого столбца на эту строку не распространяется |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang="ru"> <meta charset="UTF-8"> <title>First</title> <style> table { border-collapse: collapse; font-family:"Arial", sans-serif; font-size: 0.9em; margin: 50px; position: relative; } td { border: 1px solid black; width: 150px; padding: 5px; } thead { background-color: coral; font-weight: bold; } .select-group { font-weight: normal; font-style: italic; display: none; position: absolute; background-color: burlywood; width: 150px; padding: 5px; border: 1px solid black; top: 33px; } td:hover > .select-group { display: block; } thead:hover { cursor: pointer; } .second-name { left: 0; } .first-name { left: 161px; } .otch { left: 322px; } .select-item { padding: 5px 0; border-bottom: 1px solid black; } .select-item:hover { background-color: darkkhaki; } span { background-color: #fff; padding: 3px; width: 144px; display: block; } label { display: block; } </style> </head> <body> <table> <thead> <tr> <td> <span>Фамилия</span> <div class="select-group second-name"> <label> <input class="select-item col11" type="checkbox" value="Епихин" data-type="surname">Епихин</label> <label> <input class="select-item col11" type="checkbox" value="Буртовой" data-type="surname">Буртовой</label> </div> </td> <td> <span>Имя</span> <div class="select-group first-name"> <label> <input class="select-item col11" type="checkbox" value="Александр" data-type="name">Александр</label> <label> <input class="select-item col11" type="checkbox" value="Евгений" data-type="name">Евгений</label> <label> <input class="select-item col11" type="checkbox" value="Сергей" data-type="name">Сергей</label> </div> </td> <td> <span>Отчество</span> <div class="select-group otch"> <label> <input class="select-item col11" type="checkbox" value="Валерьевич" data-type="middle">Валерьевич</label> <label> <input class="select-item col11" type="checkbox" value="Олегович" data-type="middle">Олегович</label> <label> <input class="select-item col11" type="checkbox" value="Анатольевич" data-type="middle">Анатольевич</label> </div> </td> </tr> </thead> <tbody> <tr> <td class="col1">Епихин</td> <td class="col2">Александр</td> <td class="col3">Валерьевич</td> </tr> <tr> <td class="col1">Буртовой</td> <td class="col2">Евгений</td> <td class="col3">Олегович</td> </tr> <tr> <td class="col1">Епихин</td> <td class="col2">Александр</td> <td class="col3">Анатольевич</td> </tr> <tr> <td class="col1">Епихин</td> <td class="col2">Сергей</td> <td class="col3">Валерьевич</td> </tr> <tr> <td class="col1">Буртовой</td> <td class="col2">Александр</td> <td class="col3">Олегович</td> </tr> </tbody> </table> <script> window.onload = function () { var cache = { surname: {}, name: {}, middle: {} }, s, n, m, tr, tbl = document.querySelector("table"), dataTr = tbl.querySelectorAll("tbody tr"); for (var i = 0; i < dataTr.length; ++i) { tr = dataTr[i]; s = tr.cells[0].innerHTML; n = tr.cells[1].innerHTML; m = tr.cells[2].innerHTML; if (!cache.surname.hasOwnProperty(s)) { cache.surname[s] = []; tbl.querySelector("input[data-type=surname][value='" + s + "']").checked = true; } if (!cache.name.hasOwnProperty(n)) { cache.name[n] = []; tbl.querySelector("input[data-type=name][value='" + n + "']").checked = true; } if (!cache.middle.hasOwnProperty(m)) { cache.middle[m] = []; tbl.querySelector("input[data-type=middle][value='" + m + "']").checked = true; } cache.surname[s].push(tr); cache.name[n].push(tr); cache.middle[m].push(tr); } tbl.onclick = function (e) { var el = e ? e.target : window.event.srcElement; if (el.tagName != "INPUT" || el.type != 'checkbox') return; var type = cache[el.getAttribute('data-type')][el.value]; for (var i = 0; i < type.length; ++i) { type[i].style.display = el.checked ? "" : "none"; } } }; </script> </body> </html> еще вариант, но и он далек от идеала. Не совсем понятна логика. Переключение Имя,фамилия, отчество. Какой порядок должен быть |
Часовой пояс GMT +3, время: 09:51. |