Подскажите как обратиться к трем следующим элементам в таблице.
При обращении через nextElementSibling
цепляется кроме следующего братского, еще и следующая секция.
var keyAcc = document.getElementsByClassName("keys");
var j;
for (j = 0; j < keyAcc.length; j++) {
keyAcc[j].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
console.log(panel);
if (panel.style.display === "table-row") {
panel.style.display = "none";
} else {
panel.style.display = "table-row";
}
});
}
//initialize
keysAccordion();
.d-none {
display: none;
}
<table class="table_info">
<tr class="table_title">
<th class="key_name">2 keys
</th>
<th class="key_title">Download</th>
<th class="key_title">Update</th>
<th class="key_title">Stop</th>
<th class="fd">
<img src="img/icon-fd.svg" alt="">
<span>Face detector</span>
</th>
<th class="er">
<img src="img/icon-er.svg" alt="">
<span>Em. recogn.</span>
</th>
</tr>
<tr class="keys green">
<td><span>1</span>Awesome key 1</td>
<td>
<a href="#">
<img src="img/icon-btn-dowld.svg" alt="">
</a>
</td>
<td>
<a href="#" disabled=disabled>
<img src="img/upload.svg" alt="">
</a>
</td>
<td>
<a href="#" disabled=disabled>
<img src="img/stop.svg" alt="">
</a>
</td>
<td class="check">
<svg width="9px" height="7px" viewBox="0 0 9 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ic-check" fill="#D0D8FF">
<path d="M3.2173913,6.65217391 C3.1014487,6.76811652 2.97101522,6.82608696 2.82608696,6.82608696 C2.6811587,6.82608696 2.55072522,6.76811652 2.43478261,6.65217391 L0,4.2173913 L0.782608696,3.43478261 L2.82608696,5.47826087 L8.26086957,1.18571819e-13 L9,0.782608696 L3.2173913,6.65217391 Z" id="ion-ios-checkmark-empty---Ionicons"></path>
</g>
</g>
</svg>
</td>
<td class="check">
<svg width="9px" height="7px" viewBox="0 0 9 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ic-check" fill="#D0D8FF">
<path d="M3.2173913,6.65217391 C3.1014487,6.76811652 2.97101522,6.82608696 2.82608696,6.82608696 C2.6811587,6.82608696 2.55072522,6.76811652 2.43478261,6.65217391 L0,4.2173913 L0.782608696,3.43478261 L2.82608696,5.47826087 L8.26086957,1.18571819e-13 L9,0.782608696 L3.2173913,6.65217391 Z" id="ion-ios-checkmark-empty---Ionicons"></path>
</g>
</g>
</svg>
</td>
</tr>
<tr class="d-none hidden-buttons-keys">
<td colspan="3">
<a href="#">
<img src="img/icon-btn-dowld.svg" alt="">Download
</a>
</td>
</tr>
<tr class="d-none hidden-buttons-keys">
<td colspan="3">
<a href="#" disabled=disabled>
<img src="img/upload.svg" alt="">Update
</a>
</td>
</tr>
<tr class="d-none hidden-buttons-keys">
<td colspan="3">
<a href="#" disabled=disabled>
<img src="img/stop.svg" alt=""> Stop
</a>
</td>
</tr>
<tr class="keys red">
<td><span>2</span>Awesome key 2</td>
<td>
<a href="#">
<img src="img/icon-btn-dowld.svg" alt="">
</a>
</td>
<td>
<a href="#">
<img src="img/upload.svg" alt="">
</a>
</td>
<td>
<a href="#">
<img src="img/stop.svg" alt="">
</a>
</td>
<td class="check">
<svg width="9px" height="7px" viewBox="0 0 9 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ic-check" fill="#D0D8FF">
<path d="M3.2173913,6.65217391 C3.1014487,6.76811652 2.97101522,6.82608696 2.82608696,6.82608696 C2.6811587,6.82608696 2.55072522,6.76811652 2.43478261,6.65217391 L0,4.2173913 L0.782608696,3.43478261 L2.82608696,5.47826087 L8.26086957,1.18571819e-13 L9,0.782608696 L3.2173913,6.65217391 Z" id="ion-ios-checkmark-empty---Ionicons"></path>
</g>
</g>
</svg>
</td>
<td class="check">
<span></span>
</td>
</tr>
<tr class="d-none hidden-buttons-keys">
<td colspan="3">
<a href="#">
<img src="img/icon-btn-dowld.svg" alt="">Download
</a>
</td>
</tr>
<tr class="d-none hidden-buttons-keys">
<td colspan="3">
<a href="#" disabled=disabled>
<img src="img/upload.svg" alt="">Update
</a>
</td>
</tr>
<tr class="d-none hidden-buttons-keys">
<td colspan="3">
<a href="#" disabled=disabled>
<img src="img/stop.svg" alt=""> Stop
</a>
</td>
</tr>
</table>
А нужно зацепить только 3 следующих братских элемента.