Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Помогите сверстать дерево таблицу


Автор: neosapient 20.11.2009, 17:11
Здраствуйте.


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


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

Например, есть таблица, которую можно раскрыть, на пункте шурупы
http://ipicture.ru/

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

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

Автор: neosapient 20.11.2009, 19:13
Цитата

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

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

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

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

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

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

Автор: bars80080 20.11.2009, 20:53
ну, тогда всё возможно. надо только хост соответствующий найти. или это всё локально?

конечно, перво-наперво стоит почитать мануал. в 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
Спасибо за развернутый ответ.
Все прекрасно работает  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>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)