скрытие строк таблицы и скролл к нажатой строке
skryl0v,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My_page3</title>
<style>
#st{width:40px;}
.box {
background-color: blue;
display: none;
}
.box.show {
display: table-row;
}
.parent {
background-color: yellow;
}
</style>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
var nodes = document.querySelectorAll(".parent");
var num_scroll;
[].forEach.call(nodes, function(tr) {
var box = [],
next = tr.nextElementSibling;
while (next && next.classList.contains("box")) {
box.push(next);
next = next.nextElementSibling;
}
tr.querySelector("td a").addEventListener("click", function(event) {
event.preventDefault();
box.forEach(function(item){
item.classList.toggle("show");
});
tr.scrollIntoView();
},false)
})
});
</script>
</head>
<body>
<table name="table1" border="1">
<tr class="parent">
<td id="st"><a href="#">Gold</a></td>
<td>121</td>
</tr>
<tr class="box">
<td>NewGold</td>
<td>122</td>
</tr>
<tr class="box">
<td>NewNewGold</td>
<td>000</td>
</tr>
<tr class="parent">
<td><a href="#">Box</a></td>
<td>12</td>
</tr>
<tr class="box">
<td>NewBox</td>
<td>13</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr><tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
</table>
</body>
</html>
|