Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.05.2016, 14:40
Новичок на форуме
Отправить личное сообщение для mcdark Посмотреть профиль Найти все сообщения от mcdark
 
Регистрация: 13.05.2016
Сообщений: 1

Разворачивающийся список по клику внутри таблицы
Доброго времени суток! Надеюсь на помощь участников форума.
Объяню что хочу получить. Внутри таблицы хочу сделать раскрывающиеся пункты из первого столбика, чтобы можно было прочитать пояснение.


Добавляю все это в Adobe Muse посредством вставки html из Exel (таблица в центре нужна, подгоняю по пикселям), потом загружаю на сайт через функцию публикации, чтобы не сохранять ничего на пк. Разбираюсь сам немного в html коде и что-то слабенько могу с css делать, скрипты имеют совершенно другой вид, похожий на код Basic или C, поэтому разобраться не могу. Привожу пример сразу с css кодом, т.к без него данный пост не имеет смысла.

С чем нужна помощь:
1. Голубой заголовок таблицы почему-то изменяется в размере по вертикали и все становится плохо - вся таблица едет как ей вздумается. Не знаю как исправить.
2. Надписи после добавления скрипта становятся по цвету как ссылки - полагаю, это через css можно исправить, но там такой огород, что для меня это сложно.
3. По клику список ведет себя двояко - раскрывается, сворачивается, раскрывается или раскрывается и сворачивается. Не понимаю опять, в чем косяк, т.к код отдельно ведет себе хорошо.
4. Еще не гуглил, но хотел позже добавить подсказку с текстом при наведении на текст, который можно кликнуть.
5. Не знаю, можно ли приводить другой сайт в пример, но вот у многих хостинг компаний раздел FAQ и помощь так устроены (но не внутри таблицы) - при клике раскрывается список и ничего не съезжает. Понравилось как оформлено вот тут FAQ сайта и даже хотел код там скопировать через source страницы, но не вышло вообще ровным счетом ничего.

Заранее спасибо за любую помощь.

Сам код:
<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;border-color:#999;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#999;color:#444;background-color:#F7FDFA;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#999;color:#fff;background-color:#26ADE4;}
.tg .tg-yw4l{vertical-align:top}
th.tg-sort-header::-moz-selection { background:transparent; }th.tg-sort-header::selection      { background:transparent; }th.tg-sort-header { cursor:pointer; }table th.tg-sort-header:after {  content:'';  float:right;  margin-top:7px;  border-width:0 4px 4px;  border-style:solid;  border-color:#404040 transparent;  visibility:hidden;  }table th.tg-sort-header:hover:after {  visibility:visible;  }table th.tg-sort-desc:after,table th.tg-sort-asc:after,table th.tg-sort-asc:hover:after {  visibility:visible;  opacity:0.4;  }table th.tg-sort-desc:after {  border-bottom:none;  border-width:4px 4px 0;  }</style>
<table id="tg-0RK1w" class="tg">
  <tr>
    <th class="tg-yw4l">Продукт</th>
    <th class="tg-yw4l">Кол-во</th>
    <th class="tg-yw4l">Принадлежность в %</th>
    <th class="tg-yw4l">Пояснение</th>
    <th class="tg-yw4l">Действия</th>
    <th class="tg-yw4l"></th>
  </tr>
  <tr>
    <td class="tg-yw4l"><head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
  <body>
<div class="view-source">
  <a href="#">Superfaza Bronze (может)</a>
  <div class="hide">При заходе с WEB браузера защита может попросить телефон. 
Работает однозначно точно Москва/Питер, возможны ответы на вопросы по почте сервиса yandex.ru (можно найди в соответствующем разделе). 
Поля заполнить обязательно, обратить внимание на профиль.
Формат:
Name:LastName;skype;workmail;AccountNumber:reg_id;DeviceName;BrowserName</div>
</div>
<script>
$(function(){
    $('.view-source .hide').hide();
    $a = $('.view-source a');
    $a.on('click', function(event) {
      event.preventDefault();
      $a.not(this).next().slideUp(500);
      $(this).next().slideToggle(500);
    });
});
</script>
 
  </body>
</td>
    <td class="tg-yw4l">10</td>
    <td class="tg-yw4l">2</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l"><head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
  <body>
<div class="view-source">
  <a href="#">Superfaza Super Bronze (может)</a>
  <div class="hide">При заходе с WEB браузера защита может попросить телефон. 
Работает однозначно точно Москва/Питер, возможны ответы на вопросы по почте сервиса yandex.ru (можно найди в соответствующем разделе). 
Поля заполнить обязательно, обратить внимание на профиль.
Формат:
Name:LastName;skype;workmail;AccountNumber:reg_id;DeviceName;BrowserName</div>
</div>
<script>
$(function(){
    $('.view-source .hide').hide();
    $a = $('.view-source a');
    $a.on('click', function(event) {
      event.preventDefault();
      $a.not(this).next().slideUp(500);
      $(this).next().slideToggle(500);
    });
});
</script>
 
  </body>
</td>
    <td class="tg-yw4l">0</td>
    <td class="tg-yw4l">3</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Vip Bronze (может)</td>
    <td class="tg-yw4l">0</td>
    <td class="tg-yw4l">5</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Silver</td>
    <td class="tg-yw4l">22</td>
    <td class="tg-yw4l">8</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Super Silver</td>
    <td class="tg-yw4l">1340</td>
    <td class="tg-yw4l">10</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Vip Silver</td>
    <td class="tg-yw4l">0</td>
    <td class="tg-yw4l">15</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Gold</td>
    <td class="tg-yw4l">25</td>
    <td class="tg-yw4l">20</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Super Gold</td>
    <td class="tg-yw4l">20</td>
    <td class="tg-yw4l">40</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Vip Gold</td>
    <td class="tg-yw4l">281</td>
    <td class="tg-yw4l">40</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Platinum</td>
    <td class="tg-yw4l">967</td>
    <td class="tg-yw4l">50</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
</table>
Ответить с цитированием
  #2 (permalink)  
Старый 13.05.2016, 16:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от mcdark
3. По клику список ведет себя двояко - раскрывается, сворачивается, раскрывается или раскрывается и сворачивается. Не понимаю опять, в чем косяк, т.к код отдельно ведет себе хорошо.
не надо скрипт грузить повторно
Ответить с цитированием
  #3 (permalink)  
Старый 13.05.2016, 16:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

mcdark,
убрал лишнее ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hide{
    display:none;
    word-break:break-all;
  }
 .tg{
  border-collapse:collapse;
  border-spacing:0;
  border-color:#999;
}

.tg td{
  font-family:Arial,sans-serif;
  font-size:14px;
  padding:10px 5px;
  border-style:solid;
  border-width:0px;
  word-break:normal;
  border-color:#999;
  color:#444;
  background-color:#F7FDFA;
}

.tg th{
  font-family:Arial,sans-serif;
  font-size:14px;
  font-weight:normal;
  padding:10px 5px;
  border-style:solid;
  border-width:0px;
  overflow:hidden;
  word-break:normal;
  border-color:#999;
  color:#fff;
  background-color:#26ADE4;
}

.tg .tg-yw4l{
  vertical-align:top;
}

th.tg-sort-header::-moz-selection{
  background:transparent;
}

th.tg-sort-header::selection{
  background:transparent;
}

th.tg-sort-header{
  cursor:pointer;
}

table th.tg-sort-header:after{
  content:'';
  float:right;
  margin-top:7px;
  border-width:0 4px 4px;
  border-style:solid;
  border-color:#404040 transparent;
  visibility:hidden;
}

table th.tg-sort-header:hover:after{
  visibility:visible;
}

table th.tg-sort-desc:after,table th.tg-sort-asc:after,table th.tg-sort-asc:hover:after{
  visibility:visible;
  opacity:0.4;
}

table th.tg-sort-desc:after{
  border-bottom:none;
  border-width:4px 4px 0;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script>
$(function(){
    var $hide = $('.hide');
    $hide.each(function(indx, el){
     var parent = $(el).parents("td"),
         w = parent.width(),
         $a = $("a", parent);
     $(el).width(w);
     $a.on('click', function(event) {
      event.preventDefault();
      $hide.not(el).slideUp(500);
      $(el).slideToggle(500);
    });

      });


});
</script>
</head>

<body>
<style type="text/css">

</style>

<table id="tg-0RK1w" class="tg">
  <tr>
    <th class="tg-yw4l">Продукт</th>
    <th class="tg-yw4l">Кол-во</th>
    <th class="tg-yw4l">Принадлежность в %</th>
    <th class="tg-yw4l">Пояснение</th>
    <th class="tg-yw4l">Действия</th>
    <th class="tg-yw4l"></th>
  </tr>
  <tr>
    <td class="tg-yw4l">

  <a href="#">Superfaza Bronze (может)</a>
  <div class="hide">При заходе с WEB браузера защита может попросить телефон.
Работает однозначно точно Москва/Питер, возможны ответы на вопросы по почте сервиса yandex.ru (можно найди в соответствующем разделе).
Поля заполнить обязательно, обратить внимание на профиль.
Формат:
Name:LastName;skype;workmail;AccountNumber:reg_id;DeviceName;BrowserName</div>




</td>
    <td class="tg-yw4l">10</td>
    <td class="tg-yw4l">2</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">
  <a href="#">Superfaza Super Bronze (может)</a>
  <div class="hide">При заходе с WEB браузера защита может попросить телефон.
Работает однозначно точно Москва/Питер, возможны ответы на вопросы по почте сервиса yandex.ru (можно найди в соответствующем разделе).
Поля заполнить обязательно, обратить внимание на профиль.
Формат:
Name:LastName;skype;workmail;AccountNumber:reg_id;DeviceName;BrowserName</div>

</td>
    <td class="tg-yw4l">0</td>
    <td class="tg-yw4l">3</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Vip Bronze (может)</td>
    <td class="tg-yw4l">0</td>
    <td class="tg-yw4l">5</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Silver</td>
    <td class="tg-yw4l">22</td>
    <td class="tg-yw4l">8</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Super Silver</td>
    <td class="tg-yw4l">1340</td>
    <td class="tg-yw4l">10</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Vip Silver</td>
    <td class="tg-yw4l">0</td>
    <td class="tg-yw4l">15</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Gold</td>
    <td class="tg-yw4l">25</td>
    <td class="tg-yw4l">20</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Super Gold</td>
    <td class="tg-yw4l">20</td>
    <td class="tg-yw4l">40</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Vip Gold</td>
    <td class="tg-yw4l">281</td>
    <td class="tg-yw4l">40</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Superfaza Platinum</td>
    <td class="tg-yw4l">967</td>
    <td class="tg-yw4l">50</td>
    <td class="tg-yw4l">тут любая информация — критерии чего-то</td>
    <td class="tg-yw4l">Посмотреть</td>
    <td class="tg-yw4l">Отправить</td>
  </tr>
</table>


</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2016, 01:37
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

mcdark,
Adobe Muse - ЗЛО))))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Внутри разворачивающегося по клику DIVа не работают ссылки JavaScriptNoob Элементы интерфейса 2 17.11.2015 00:01
Выпадающий список по клику gorbuz9kin Общие вопросы Javascript 16 28.10.2015 15:02
Как получить значение ячейки таблицы внутри блока div, в итерации .each() Sanu0074 jQuery 1 21.01.2014 19:32
По клику на ссылку меняем содержимое внутри блока goooooch Общие вопросы Javascript 6 26.01.2011 15:25
позиция рисунка внутри ячейки таблицы. arlek1n Общие вопросы Javascript 11 22.12.2008 10:21