Форум

JAMLIGHT · #11 (**permalink**) 07.02.2017, 22:28

закономерность в порядковом номере для общей переменной

JAMLIGHT · #12 (**permalink**) 07.02.2017, 22:31

<table border="1">
  <tr class="spoil1">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide1">
    <td>скрытые</td>
    <td>строки</td>
  </tr>1
  <tr class="hide1">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="spoil2">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide2">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide2">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="spoil3">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide3">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide3">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
</table>

Пропиши скрипт

рони · #13 (**permalink**) 07.02.2017, 22:38

JAMLIGHT,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  table {
 width:600px;
 border:1px;
 }
 .hide {
 display:none;
 }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function(){
$('.spoil').click(function(){
$(this).nextUntil('.spoil').toggle();
})
})

  </script>
</head>

<body>
<table border="1">
  <tr class="spoil">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="spoil">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="spoil">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
</table>


</body>
</html>

JAMLIGHT · #14 (**permalink**) 07.02.2017, 22:40

тем что он скрывает ВСЕ строки с классом hide прописанные после кликнутой строки с классом spoil. А надо не все, а определённые. Тобишь надо чтобы spoil1 скрывал Hide1, spoil 2-Hide2 и тд Для этой цели я прописал 5 скриптов,но это не дело сами понимаете

рони · #15 (**permalink**) 07.02.2017, 22:47

JAMLIGHT,
смотрите макет выше.

JAMLIGHT · #16 (**permalink**) 07.02.2017, 22:54

К примеру мне надо разворачивающиеся строки в таблице с городами со средним заработком. Например Средний заработок 10 000 рублей-Разворачивается(скрываетс� �) 5 городов. Средний заработок 15 000 Руб-7 городов. А если у меня этих средних заработков в таблице 50 штук я что 50 аналогичных скриптов буду в код писать? . Если так копипастить скрипт то он займёт больше разметки
\Спасибо щас потестю

рони · #17 (**permalink**) 07.02.2017, 23:02

JAMLIGHT,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  table {
 width:600px;
 border:1px;
 }
 [class*="hide"] {
 display:none;
 }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function(){
$('.spoil').click(function(){
var cls = $(this).data("cls")
$(cls).toggle();
})
})

  </script>
</head>

<body>
<table border="1">
  <tr class="spoil"  data-cls=".hide1">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide1">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide1">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="spoil" data-cls=".hide2">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide2">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide2">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="spoil" data-cls=".hide3">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide3">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide3">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
</table>



</body>
</html>

JAMLIGHT · #18 (**permalink**) 07.02.2017, 23:04

То что надо. Ценю

JAMLIGHT · #19 (**permalink**) 07.02.2017, 23:11

а чем эти 2 варианта отличаются?

рони · #20 (**permalink**) 07.02.2017, 23:17

JAMLIGHT,

тем что для второго варианта пост№17 неважно где будут находится открываемые строки

Форум

Справочник

Discord чат

Курсы javascript