Не получается организовать выпадающие строки в таблице при помощи стиля display

[beba]

Не получается организовать выпадающие строки в таблице при помощи стиля display

Доброго времени суток, ув. форумчане.

у меня проблема ... пытаюс сделать так, чтобы ифнормация о товарах выводилась в опр. таблице.. при нажатии на наименование, отображалось описание товара с доп. опцией..

таблица такого вида

=====================================
| Номер записи | Наименование | Статус |
=====================================
| 1 |  Товар №1 | Вкл. |
=======================
| 2 |  Товар №2 | Вкл. |
=======================

И чтобы после нажатия на Товар №1 таблица бы преобразилась в

=====================================
| Номер записи | Наименование | Статус |
=====================================
| 1 |  Товар №1 | Вкл. |
==================================
|   |  Описание Товара №1 |      |
================================================
|   |  Свойство1 Товара №1 |  Значение свойства1 |
================================================
|   |  Свойство2 Товара №1 |  Значение свойства2 |
================================================
| 2 |  Товар №2 | Вкл. |
========================

для этого пишу след строки:

<table cellpading='0' cellspacing='0' width='100%' border='0'>
  <tr>
    <td> 1 </td>
    <td> 
      <a onClick=' document.getElementById(1).style.display="block" '>
        Товар №1
      </a>
    </td>
    <td> Вкл. </td>
  </tr>
  <div style='display:none' id='1'>
    <tr>
      <td>  </td>
      <td> Описние товар №1 </td>
      <td>  </td>
    </tr>
    <tr>
      <td>  </td>
      <td> Свойство1 товара №1  </td>
      <td> Значение свойства1 </td>
    </tr>
    <tr>
      <td>  </td>
      <td> Свойство2 товара №1  </td>
      <td> Значение свойства2 </td>
    </tr>
  </div>
  <tr>
    <td> 2 </td>
    <td> Товар №2  </td>
    <td> Вкл. </td>
  </tr>
</table>

так отображается и то, что помещено в div... может быть я немного не то делаю..
подскажите пож-та..

если свойство display и id перекинуть на тэг <tr> то все работает, но отображается почему так, как будто размещена строка в первом столбце..

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

 

[an_kalinovski]

Да ужжж.... Для начала почитай внимательно свой код.

</tr>
<div style='display:none' id='1'>
<tr>

это что за бред? с каких пор стало можно вписывать что-то между <tr> - ами?

 

[beba]

спасибо за ответ конечно же ш...
может сказывается переработка..

но пробовал сначала так вот ...

<tr style='display:none' id='1'>
<td>
...
но получалось когда менял свойство display на block то сколько бы нибыло тегов <td>, они лупятся как то неправильно..

типа первая строка обычная три столбца
а вторая строка style:block лупится в первый столбец с новой строки, но в свою очередь делиться на три стоблца..
если поглядеть по соурсу который выдается на странице то получается что строки должны ж идти одна за одной и столбцы должны идти ровно.. но не идут...

я в принципе впревые обратился к технологии такой.. поэтому извиняюсь за может быть бред какой...

так где хоть прибл. глянуть мне.. почитать..?

-~{}~ 18.08.06 00:40:

все ... решил блин..
делал сначала я правильно вот только вместо

document.getElementById(1).style.display="block"

нужно было

document.getElementById(1).style.display="table-row"

и все нормально ... т.е. получается ...чтобы срятать строку таблицы нужно было

<tr style='display:none' id='1'> 
....
</tr>

а для того чтобы открыть эту строку и сохранить правильность расположения столбцов нужно было по событию сделать след.

document.getElementById(1).style.display="table-row"

Всем спасибо за просмотр и кому за участие практически в монологе
Всем удачи в поисках решений.

 

[SelenIT]

можно для показа делать style.display="" - это подставляет значение по умолчанию (block для div, table-row для tr, inline для span и т.д.)

 

[beba]

SelenIT
спасиб.