<!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>
еще вариант, но и он далек от идеала. Не совсем понятна логика. Переключение Имя,фамилия, отчество. Какой порядок должен быть