Изучаю 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. Если не правильно или неудобно оформил тему то скажите как исправить.