|
Сообщение от leshiple
|
|
P.S. Если не правильно или неудобно оформил тему то скажите как исправить.
|
добавь все атрибуты [ html run height=500 hide]
мой вариант на сон грядущий, код жутковат, но вроде бы работает
<!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>