Форум

skryl0v · #1 (**permalink**) 06.12.2015, 10:50

Всем добрый день, мне нужно сделать выпадающие строки у таблицы следующим образом, чтобы по нажатию ссылки поля в таблице под ней выпадали строки относящиеся к данной ссылке полю.
Я написал что-то похожее но у меня открываются все подстроки полей, а нужно чтобы открывались только те которые соответствуют нажатому полю и соответственно с закрытием так же. Условия такие что количество подстрок для всех строк ссылок не обязательно должно быть одинаковое.
Привожу свой скрипт, подскажите пожалуйста в какую сторону думать и как это реализовать. Заранее благодарен тем кто откликнется и что-нибудь подскажет.

<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>

рони · #2 (**permalink**) 06.12.2015, 10:56

skryl0v,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 06.12.2015, 11:42

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 · #4 (**permalink**) 06.12.2015, 12:44

благодарю Рони, это то что нужно))

skryl0v · #5 (**permalink**) 07.12.2015, 09:51

я поторопился обрадовался что это то, хотя здесь открывается по нажатию даже второго столбца, но нужно чтобы открывалось только по нажатию ссылки из первого столбца. Подскажите пожалуйста что нужно опоправить.

рони · #6 (**permalink**) 07.12.2015, 10:20

skryl0v,
строка 31 ...если нужна ещё и ссылка то
можно так

tr.querySelector("td a").addEventListener

skryl0v · #7 (**permalink**) 07.12.2015, 10:31

Сообщение от рони

рони,
строка 31 ...если нужна ещё и ссылка то
можно так

tr.querySelector("td a").addEventListener

спасибо!!!

skryl0v · #8 (**permalink**) 08.12.2015, 09:54

подскажите пожалуйста как сделать скроллинг до выбранной выпадающей строки. Если там будет например не 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>

рони · #9 (**permalink**) 08.12.2015, 10:20

Сообщение от skryl0v

как сделать скроллинг до выбранной выпадающей строки

не понял, о чём это вы

skryl0v · #10 (**permalink**) 08.12.2015, 10:24

ну вот если запустить последний код который я скинул где очень много строк, которые не убираются в высоту окна, и раскрыть например самую последнюю строку, то после клика окно сразу перемещается на самую первоначальную позицию и мы не видим какую мы там таблицу открыли, а как сделать чтобы либо окно не возвращалось на первоначальную позицию либо после возврата скроллингом перемещалась до той строки которую мы открыли.

Форум

Справочник

Discord чат

Курсы javascript