Развертывание строк в таблице
Всем добрый день, мне нужно сделать выпадающие строки у таблицы следующим образом, чтобы по нажатию ссылки поля в таблице под ней выпадали строки относящиеся к данной ссылке полю.
Я написал что-то похожее но у меня открываются все подстроки полей, а нужно чтобы открывались только те которые соответствуют нажатому полю и соответственно с закрытием так же. Условия такие что количество подстрок для всех строк ссылок не обязательно должно быть одинаковое. Привожу свой скрипт, подскажите пожалуйста в какую сторону думать и как это реализовать. Заранее благодарен тем кто откликнется и что-нибудь подскажет.
<html>
<head>
<meta charset="utf-8">
<title>My_page3</title>
<style>
.box{background-color: blue;}
.parent{ background-color: yellow;}
</style>
<script type="text/javascript">
function openbox(){
var disp = document.getElementsByClassName('box');
for(var i=0;i<disp.length;i++){
if(disp[i].style.display == "none"){
disp[i].style.display = "";
}
else{
disp[i].style.display = "none";
}
}
}
</script>
</head>
<body>
<table name="table1" border="1">
<tr class="parent">
<td><a href="#" onclick="openbox();">Gold</a></td>
<td>121</td>
</tr>
<tr class="box" style="display: none;">
<td>NewGold</td>
<td>122</td>
</tr>
<tr class="box" style="display: none;">
<td>NewNewGold</td>
<td>000</td>
</tr>
<tr class="parent">
<td><a href="#" onclick="openbox();">Box</a></td>
<td>12</td>
</tr>
<tr class="box" style="display: none;">
<td>NewBox</td>
<td>13</td>
</tr>
<tr class="parent">
<td><a href="#" onclick="openbox();">Tools</a></td>
<td>10</td>
</tr>
<tr class="box" style="display: none;">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box" style="display: none;">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box" style="display: none;">
<td>NewNewTools</td>
<td>14</td>
</tr>
</table>
</body>
</html>
|
skryl0v,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
открыть скрыть строки таблицы
skryl0v,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My_page3</title>
<style>
.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");
[].forEach.call(nodes, function(tr) {
var box = [],
next = tr.nextElementSibling;
while (next && next.classList.contains("box")) {
box.push(next);
next = next.nextElementSibling
}
tr.cells[0].addEventListener("click", function() {
box.forEach(function(item) {
item.classList.toggle("show")
});
return false
})
})
});
</script>
</head>
<body>
<table name="table1" border="1">
<tr class="parent">
<td><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>
</table>
</body>
</html>
|
благодарю Рони, это то что нужно))
|
не совсем то что нужно:)
я поторопился обрадовался что это то, хотя здесь открывается по нажатию даже второго столбца, но нужно чтобы открывалось только по нажатию ссылки из первого столбца. Подскажите пожалуйста что нужно опоправить.
|
skryl0v,
строка 31 ...если нужна ещё и ссылка то можно так
tr.querySelector("td a").addEventListener
|
Цитата:
|
скроллинг до выбранной строки
подскажите пожалуйста как сделать скроллинг до выбранной выпадающей строки. Если там будет например не 100 строк а 1000.
<!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() {
box.forEach(function(item){
item.classList.toggle("show");
});
num_scroll = window.pageYOffset;
this.scrollBy(0,num_scroll);
alert(num_scroll);
})
})
});
</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>
|
Цитата:
|
ну вот если запустить последний код который я скинул где очень много строк, которые не убираются в высоту окна, и раскрыть например самую последнюю строку, то после клика окно сразу перемещается на самую первоначальную позицию и мы не видим какую мы там таблицу открыли, а как сделать чтобы либо окно не возвращалось на первоначальную позицию либо после возврата скроллингом перемещалась до той строки которую мы открыли.
|
| Часовой пояс GMT +3, время: 17:48. |