Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 03.08.2022, 15:18   #1
newerow1989
Я самый любопытный
Участник клуба
 
Аватар для newerow1989
 
Регистрация: 24.07.2012
Сообщений: 1,949
По умолчанию Отображение строк в таблице

Здравствуйте!

Не подскажите ли, как путем нажатия гиперссылки отобразить часть строк в таблице? Метод display: block работает криво (см. рис.).

table.png

Код:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style>
.tableinfo{
   background: #D0D0D0;
   margin: 8px;
}
.tableinfo td{
   background: white;
   text-align: center;
   padding: 4px;
}

.r{
   text-align: right;
   font-size: 85%;
}
</style>
<script>
   function trvis()
   {
      for (i=6; i<=21; i++)
         document.getElementById('tr'+i).style.display='block';
      document.getElementById('novis').style.display='none';
   }
</script>
</head>

<body>
<div class="r">Таблица 1</div>
<div align="center">
<table class="tableinfo" cellspacing="1" border="0">
   <tr>
      <td rowspan="2">Версия</td>
      <td colspan="2">Код версии</td>
   </tr>
   <tr>
      <td>двоичное число</td>
      <td>десятичное число</td>
   </tr>
   <tr>
      <td>1</td>
      <td>000001 111100 100101</td>
      <td>7973</td>
   </tr>
   <tr>
      <td>2</td>
      <td>000010 000101 101111</td>
      <td>8559</td>
   </tr>
   <tr>
      <td>3</td>
      <td>000011 111001 001010</td>
      <td>15946</td>
   </tr>
   <tr>
      <td>4</td>
      <td>000100 001011 011110</td>
      <td>17118</td>
   </tr>
   <tr>
      <td>5</td>
      <td>000101 110111 111011</td>
      <td>24059</td>
   </tr>
   <tr id="tr6" style="display: none;">
      <td>6</td>
      <td>000110 001110 110001</td>
      <td>25521</td>
   </tr>
   <tr id="tr7" style="display: none;">
      <td>7</td>
      <td>000111 110010 010100</td>
      <td>31892</td>
   </tr>
   <tr id="tr8" style="display: none;">
      <td>8</td>
      <td>001000 010110 111100</td>
      <td>34236</td>
   </tr>
   <tr id="tr9" style="display: none;">
      <td>9</td>
      <td>001001 101010 011001</td>
      <td>39577</td>
   </tr>
   <tr id="tr10" style="display: none;">
      <td>10</td>
      <td>001010 010011 010011</td>
      <td>42195</td>
   </tr>
   <tr id="tr11" style="display: none;">
      <td>11</td>
      <td>001011 101111 110110</td>
      <td>48118</td>
   </tr>
   <tr id="tr12" style="display: none;">
      <td>12</td>
      <td>001100 011101 100010</td>
      <td>51042</td>
   </tr>
   <tr id="tr13" style="display: none;">
      <td>13</td>
      <td>001101 100001 000111</td>
      <td>55367</td>
   </tr>
   <tr id="tr14" style="display: none;">
      <td>14</td>
      <td>001110 011000 001101</td>
      <td>58893</td>
   </tr>
   <tr id="tr15" style="display: none;">
      <td>15</td>
      <td>001111 100100 101000</td>
      <td>63784</td>
   </tr>
   <tr id="tr16" style="display: none;">
      <td>16</td>
      <td>010000 101101 111000</td>
      <td>68472</td>
   </tr>
   <tr id="tr17" style="display: none;">
      <td>17</td>
      <td>010001 010001 011101</td>
      <td>70749</td>
   </tr>
   <tr id="tr18" style="display: none;">
      <td>18</td>
      <td>010010 101000 010111</td>
      <td>76311</td>
   </tr>
   <tr id="tr19" style="display: none;">
      <td>19</td>
      <td>010011 010100 110010</td>
      <td>79154</td>
   </tr>
   <tr id="tr20" style="display: none;">
      <td>20</td>
      <td>010100 100110 100110</td>
      <td>84390</td>
   </tr>
   <tr id="tr21" style="display: none;">
      <td colspan="3"><i>Всего - 20 версий</i></td>
   </tr>
</table>
<div id="novis">
   <a href="#" onclick="trvis(); return false;">Показать все версии</a>
</div>
</div>
</body>

</html>
При скачивании файла "table.txt", поменяйте расширение на "html"!
Изображения
Тип файла: png table1.png (20.4 Кб, 19 просмотров)
Вложения
Тип файла: txt table.txt (3.4 Кб, 2 просмотров)
С запрограммированным приветом, Неверов Евгений!
Сайт: http://newerow1989.ru
[Паскаль] [Delphi]

Последний раз редактировалось newerow1989; 03.08.2022 в 15:26. Причина: Понять не могу как вставить рисунки
newerow1989 вне форума Ответить с цитированием
Старый 03.08.2022, 15:55   #2
macomics
Участник клуба
 
Регистрация: 17.04.2022
Сообщений: 1,833
По умолчанию

http://htmlbook.ru/css/display
вместо block используйте table-row
Изображения
Тип файла: png table-row.png (20.6 Кб, 17 просмотров)

Последний раз редактировалось macomics; 03.08.2022 в 15:58.
macomics вне форума Ответить с цитированием
Старый 04.08.2022, 15:45   #3
newerow1989
Я самый любопытный
Участник клуба
 
Аватар для newerow1989
 
Регистрация: 24.07.2012
Сообщений: 1,949
По умолчанию

macomics, спасибо за помощь!
С запрограммированным приветом, Неверов Евгений!
Сайт: http://newerow1989.ru
[Паскаль] [Delphi]
newerow1989 вне форума Ответить с цитированием
Старый 05.08.2022, 18:50   #4
Падонак
Пользователь
 
Регистрация: 17.05.2022
Сообщений: 11
По умолчанию

Люмпен-стайл эдишн:

Код:
<html>
<head>
<meta charset="utf-8" />
<style>
.tableinfo{
background: #D0D0D0;
margin: 8px;
}
.tableinfo td{
background: white;
text-align: center;
padding: 4px;
}
.r{
text-align: right;
font-size: 85%;
}
.hid{
display: none;
}
.vis{
display: table-row;
}
#novis{
cursor: pointer;
font-weight: bold;
}
#novis:hover{
color: crimson;
}
</style>
<script>
onload = function(){
document.querySelector('#novis').addEventListener('click', function(){
[this.innerHTML, this.dataset.temp] = [this.dataset.temp, this.innerHTML];
[...document.querySelectorAll('.hid')].forEach( tr => tr.classList.toggle('vis') );
});
}
</script>
</head>
<body>
<div class="r">Таблица 1</div>
<div align="center">
<table class="tableinfo" cellspacing="1" border="0">
   <tr>
      <td rowspan="2">Версия</td>
      <td colspan="2">Код версии</td>
   </tr>
   <tr>
      <td>двоичное число</td>
      <td>десятичное число</td>
   </tr>
   <tr>
      <td>1</td>
      <td>000001 111100 100101</td>
      <td>7973</td>
   </tr>
   <tr>
      <td>2</td>
      <td>000010 000101 101111</td>
      <td>8559</td>
   </tr>
   <tr>
      <td>3</td>
      <td>000011 111001 001010</td>
      <td>15946</td>
   </tr>
   <tr>
      <td>4</td>
      <td>000100 001011 011110</td>
      <td>17118</td>
   </tr>
   <tr>
      <td>5</td>
      <td>000101 110111 111011</td>
      <td>24059</td>
   </tr>
   <tr class="hid">
      <td>6</td>
      <td>000110 001110 110001</td>
      <td>25521</td>
   </tr>
   <tr class="hid">
      <td>7</td>
      <td>000111 110010 010100</td>
      <td>31892</td>
   </tr>
   <tr class="hid">
      <td>8</td>
      <td>001000 010110 111100</td>
      <td>34236</td>
   </tr>
   <tr class="hid">
      <td>9</td>
      <td>001001 101010 011001</td>
      <td>39577</td>
   </tr>
   <tr class="hid">
      <td>10</td>
      <td>001010 010011 010011</td>
      <td>42195</td>
   </tr>
   <tr class="hid">
      <td>11</td>
      <td>001011 101111 110110</td>
      <td>48118</td>
   </tr>
   <tr class="hid">
      <td>12</td>
      <td>001100 011101 100010</td>
      <td>51042</td>
   </tr>
   <tr class="hid">
      <td>13</td>
      <td>001101 100001 000111</td>
      <td>55367</td>
   </tr>
   <tr class="hid">
      <td>14</td>
      <td>001110 011000 001101</td>
      <td>58893</td>
   </tr>
   <tr class="hid">
      <td>15</td>
      <td>001111 100100 101000</td>
      <td>63784</td>
   </tr>
   <tr class="hid">
      <td>16</td>
      <td>010000 101101 111000</td>
      <td>68472</td>
   </tr>
   <tr class="hid">
      <td>17</td>
      <td>010001 010001 011101</td>
      <td>70749</td>
   </tr>
   <tr class="hid">
      <td>18</td>
      <td>010010 101000 010111</td>
      <td>76311</td>
   </tr>
   <tr class="hid">
      <td>19</td>
      <td>010011 010100 110010</td>
      <td>79154</td>
   </tr>
   <tr class="hid">
      <td>20</td>
      <td>010100 100110 100110</td>
      <td>84390</td>
   </tr>
   <tr id="tr21" class="hid">
      <td colspan="3"><i>Всего - 20 версий</i></td>
   </tr>
</table>
<div id="novis" data-temp="Скрыть добавленные версии">Показать все версии</div>
</div>
</body>

</html>
Падонак вне форума Ответить с цитированием
Старый 07.08.2022, 04:43   #5
newerow1989
Я самый любопытный
Участник клуба
 
Аватар для newerow1989
 
Регистрация: 24.07.2012
Сообщений: 1,949
По умолчанию

Падонак, спасибо! Однако, в старых браузерах не работает
С запрограммированным приветом, Неверов Евгений!
Сайт: http://newerow1989.ru
[Паскаль] [Delphi]
newerow1989 вне форума Ответить с цитированием
Старый 07.08.2022, 13:45   #6
Падонак
Пользователь
 
Регистрация: 17.05.2022
Сообщений: 11
По умолчанию

Цитата:
Сообщение от newerow1989 Посмотреть сообщение
в старых браузерах
значит, пришло время их обновить ))
Падонак вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отображение данных в таблице ProGGER_nub C# (си шарп) 0 04.12.2017 18:07
Запрос из базы данных и отображение в таблице dont_worry JavaScript, Ajax 3 19.10.2016 17:12
Отображение значения массива в сводной таблице Goodrich Microsoft Office Excel 4 08.07.2016 20:34
Некоректное отображение пордка строк в дочерней таблице(DBGrid). Vitek.klaster Помощь студентам 12 30.08.2009 19:50
Отображение в форме и таблице двух столбцов подстановок smoky Microsoft Office Access 5 01.07.2008 09:27