VPF::Помогите сверстать дерево таблицу

neosapient

Дата 20.11.2009, 17:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 672
Регистрация: 16.8.2006

Репутация: нет
Всего: 4

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

Думаю, что пишу не в ту тему, но ... мне надо сверстать html-документ.
С разработкой динамически меняющихся html-страниц знаком слабо.

Уверен, что вы сможете мне помочь: указать направление/методы/подходы или даже подсказать решение.

На странице должно находиться таблица/дерево. То есть, когда все ветки дерева свернуты, то перед нами таблица. Стоит заствить одну из веток расскрыться, как внутри будет таблица с расшифровкой.

Например, есть таблица, которую можно раскрыть, на пункте шурупы

Мне надо сформировать html-документ. У меня есть программа, которая рассчитывает данные и должна сохранить их в виде отчета в файле. Если упрощенно, то мне интерестно, в какой последовательности писать правильные теги и данные, и какие именно теги писать.

Это сообщение отредактировал(а) neosapient - 20.11.2009, 17:19

bars80080

Дата 20.11.2009, 18:45 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

ну, прежде всего, надо узнать что за программа и на каком языке она пашет.
во-вторых, хотя бы немного почитать мануал по генерации на этом языке разметки html, может быть он вообще не предназначен для этого
и только потом уже размышлять о том, как сворачивать/разворачивать таблицы

neosapient

Дата 20.11.2009, 19:13 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 672
Регистрация: 16.8.2006

Репутация: нет
Всего: 4

Цитата

ну, прежде всего, надо узнать что за программа и на каком языке она пашет.

Программа консольная, пишу её на языке С\С++

Цитата

во-вторых, хотя бы немного почитать мануал по генерации на этом языке разметки html, может быть он вообще не предназначен для этого

С html знаком на уровне = "смогу по памяти написать в правильном порядке теги, для создания таблицы".
HTML в моем понимании статичен и значит мне мало подохдит.

Цитата

и только потом уже размышлять о том, как сворачивать/разворачивать таблицы

Вопрос задал, чтобы ответ специалистов направил мои усилия в нужное русло.

Это сообщение отредактировал(а) neosapient - 20.11.2009, 19:28

bars80080

Дата 20.11.2009, 20:53 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

ну, тогда всё возможно. надо только хост соответствующий найти. или это всё локально?

конечно, перво-наперво стоит почитать мануал. в html - он настолько маленький, что даже говорить неприлично. для базы http://stepbystep.htmlbook.ru/?id=11 , найти подробнее и ещё кучу всякого в сети сейчас не проблема

советы:
1. многие не понимают, что табличные тэги никак нельзя мешать. это наименее гибкая конструкция в хтмл. нельзя, к примеру, запизивать между строчкой и ячейкой ничего, как здесь <tr>что-то<td>
2. многие шибко умные пытаются сказать, что спецификация не требует закрытия разных тэгов. сами не понимают, что закрывая тэг явно, они лишают браузера возможности перекручивать разметку по своему усмотрению.
3. собсна по вопросу. я б сделал так:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript">
var IE = false;
if(window.ActiveXObject) { IE = true; }
function show(x) {
    var par = (IE) ? 'inline-block' : 'table-row-group';
    document.getElementById(x).style.display = par;
}
function hid(x) { document.getElementById(x).style.display = 'none'; }
</script>
<style>        
.section td { background: #eeeeee; }
.subsection { display: none; } 
</style>
</head>
<body>
<table border="1" width="100%" cellpadding="5">
<tbody>
 <tr><td>наименование</td><td>закуплено</td><td>выдано</td></tr>
</tbody>
<tbody class="section" onclick="show('sub1');">
 <tr><td>гвозди</td><td>10</td><td>10</td></tr>
</tbody>
<tbody class="subsection" id="sub1" onclick="hid('sub1');">
 <tr><td>поставщик</td><td>диаметр</td><td>штук</td></tr>
 <tr><td>магазин 1</td><td>2</td><td>2</td></tr>
 <tr><td>магазин 2</td><td>3</td><td>3</td></tr>
</tbody>
<tbody class="section" onclick="show('sub2');">
 <tr><td>шурупы</td><td>10</td><td>10</td></tr>
</tbody>
<tbody class="subsection" id="sub2" onclick="hid('sub2');">
 <tr><td>поставщик</td><td>диаметр</td><td>штук</td></tr>
 <tr><td>магазин 3</td><td>2</td><td>2</td></tr>
 <tr><td>магазин 4</td><td>3</td><td>3</td></tr>
</tbody>
</table>
</body>
</html>

за любыми нюансами обращайтесь к справочникам, хотя в том сайте, ссылку на который я дал. там, к примеру, расписано, почему пришлось вводить разделение по браузерам: var par = (IE) ? 'inline-block' : 'table-row-group';

neosapient

Дата 20.11.2009, 21:38 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 672
Регистрация: 16.8.2006

Репутация: нет
Всего: 4

Спасибо за развернутый ответ.
Все прекрасно работает smile

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript">
var IE = false;
if(window.ActiveXObject) { IE = true; }
function show(x) {
    var par = (IE) ? 'inline-block' : 'table-row-group';
    document.getElementById(x).style.display = par;
}
function hid(x) { document.getElementById(x).style.display = 'none'; }
</script>
<style>        
.section td { background: #eeeeee; }
.subsection { display: none; } 
</style>
</head>
<body>
<table border="1" width="100%" cellpadding="5">
<tbody>
 <tr><td>Наименование</td><td>Закуплено<br>на сумму</td><td>Выдано<br>на сумму</td></tr>
</tbody>
<tbody class="section" onclick="show('sub1');">
 <tr><td>Гвозди</td><td>123.00</td><td>45.00</td></tr>
</tbody>
<tbody class="subsection" id="sub1" onclick="hid('sub1');">
 <tr><td COLSPAN="3">
  <table border="1" width="100%">
   <tr><td>Поставщик</td><td>Диаметр</td><td>Штук</td><td>Взял</td><td>Диаметр</td><td>Штук</td></tr>
   <tr><td>Магазин 3</td><td>2.0 мм</td><td>4</td><td>Сидоров С.</td><td>2.0 мм</td><td>2</td></tr>
   <tr><td>Магазин 4</td><td>3.0 мм</td><td>3</td><td>Иванов И.</td><td>2.0 мм</td><td>2</td></tr>
  </table>
 </td></tr>
</tbody>
<tbody class="section" onclick="show('sub2');">
 <tr><td>Шурупы</td><td>1198.00</td><td>222.00</td></tr>
</tbody>
<tbody class="subsection" id="sub2" onclick="hid('sub2');">
 <tr><td COLSPAN="3">
  <table border="1" width="100%">
   <tr><td>Поставщик</td><td>Диаметр</td><td>Штук</td><td>Взял</td><td>Диаметр</td><td>Штук</td></tr>
   <tr><td>Магазин 1</td><td>2.0 мм</td><td>789</td><td>Иванов С.</td><td>2.0 мм</td><td>284</td></tr>
   <tr><td>Магазин 1</td><td>3.0 мм</td><td> 17</td><td>Иванов И.</td><td>2.0 мм</td><td>134</td></tr>
   <tr><td>Магазин 2</td><td>2.0 мм</td><td>115</td><td>Петров С.</td><td>3.0 мм</td><td>17</td></tr>
   <tr><td>Магазин 3</td><td>3.5 мм</td><td> 20</td><td>Иванов И.</td><td>3.5 мм</td><td>20</td></tr>
   <tr><td>Магазин 3</td><td>2.0 мм</td><td>632</td><td>Петров С.</td><td>2.0 мм</td><td>500</td></tr>
  </table>
 </td></tr>
</tbody>
<tbody class="section" onclick="show('sub3');">
 <tr><td>Больты</td><td>853.00</td><td>17.00</td></tr>
</tbody>
<tbody class="subsection" id="sub3" onclick="hid('sub3');">
 <tr><td COLSPAN="3">
  <table border="1" width="100%">
   <tr><td>Поставщик</td><td>Диаметр</td><td>Штук</td><td>Взял</td><td>Диаметр</td><td>Штук</td></tr>
   <tr><td>Магазин 1</td><td>2.0 мм</td><td>333</td><td>Иванов С.</td><td>2.0 мм</td><td>76</td></tr>
   <tr><td>Магазин 2</td><td>2.0 мм</td><td>234</td><td>Петров С.</td><td>3.0 мм</td><td>17</td></tr>
   <tr><td>Магазин 3</td><td>2.0 мм</td><td>521</td><td>Петров С.</td><td>2.0 мм</td><td>32</td></tr>
  </table>
 </td></tr>
</tbody>
<tbody class="section" onclick="show('sub4');">
 <tr><td>Гайки</td><td>652.00</td><td>1088.00</td></tr>
</tbody>
<tbody class="subsection" id="sub4" onclick="hid('sub4');">
 <tr><td COLSPAN="3">
  <table border="1" width="100%">
   <tr><td>Поставщик</td><td>Диаметр</td><td>Штук</td><td>Взял</td><td>Диаметр</td><td>Штук</td></tr>
   <tr><td>Магазин 5</td><td>2.0 мм</td><td>333</td><td>Иванов С.</td><td>2.0 мм</td><td>26</td></tr>
   <tr><td>Магазин 2</td><td>4.0 мм</td><td>234</td><td>Петров С.</td><td>4.0 мм</td><td>16</td></tr>
   <tr><td>Магазин 2</td><td>8.0 мм</td><td>561</td><td>Петров С.</td><td>5.0 мм</td><td>32</td></tr>
  </table>
 </td></tr>
</tbody>
</table>
</body>
</html>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »