VPF::Скрыть, показать (таблици) - Форум программистов

Trotter

Дата 7.6.2012, 07:53 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.10.2006
Где: Нижний Новгород

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

Добрый день, задача следующая, есть страница с двумя таблицами, изначально одна скрыта

Код


<div id="table2" style="display:none">

другая сразу выводится
<div id="table1">
на странице есть кнопка вот в таком вот виде:

Код


<span><a class="BACKBUTTON" hidefocus="true" id="B1" ту та как я понимаю будет событие по клику>
<img class="ICON" src="/test/table/i1next.gif"></a></span>

и такая же кнопка назад(её нужно будет спрятать) она будет выкидывать в главное меню
нужно сделать так, что бы при нажатии на кнопку next первая таблица скрывалась, а вторая на её месте появлялась + появлялась кнопка back при нажатии на которую скрывалась вторая таблица и появлялась первая ну и что бы появлялась кнопка возврата в главное меню дальше вот этого не ушел:

Код


<HTML>
   <HEAD>
       <TITLE>TEST</TITLE>
   </HEAD>
    <BODY>
     <script type="text/javascript">
function show(nodeId)
{
    var node = document.getElementById(nodeId);
    if (node)
    {
        node.style.display = 'block';
    } 
}

function hiden(nodeId)
{
    var node = document.getElementById(nodeId);
    if (node)
    {
        node.style.display = 'none';
    } 
}
</script>

<div id="test" style="display:block">
<table>
<tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
</tr>
<tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>
</div> 

<div id="test" style="display:none">
<table>
<tr>
    <td>Я 1</td>
    <td>Я 2</td>
</tr>
<tr>
    <td>Я 3</td>
    <td>Я 4</td>
</tr>
</table>
</div>

<input type="BUTTON" value="show" onclick="show('test');"/>
<input type="BUTTON" value="Hiden" onclick="hiden('test');"/>
   </BODY>
</HTML>

на кнопке скрыть и показать внимания не обращать ) это тестовые испытания были ))
код урезанный ) полноту картины кода забыл дома... ((

Это сообщение отредактировал(а) Trotter - 7.6.2012, 08:25

Aliance

Дата 7.6.2012, 09:23 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

ID - уникальный идентификатор, он не может повторяться в рамках одного документа.

http://jsfiddle.net/Aliance/f925W/

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Trotter

Дата 7.6.2012, 10:30 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.10.2006
Где: Нижний Новгород

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

Aliance, вот я накидал:

Код


<HTML>
   <HEAD>
       <TITLE>TEST</TITLE>
   </HEAD>
    <BODY>
     <script type="text/javascript">
     
function table_2_hiden(nodeId)
{
    var node = document.getElementById(nodeId);
    if (node)
    {
        node.style.display = 'none';
    } 
}
     
function table_2_show(nodeId)
{
    var node = document.getElementById(nodeId);
    if (node)
    {
        node.style.display = 'block';
    } 
}

function table_1_show(nodeId)
{
 table_2_hiden();
    var node = document.getElementById(nodeId);
    
    if (node)
    {
        node.style.display = 'block';
    } 
    
}

function table_1_hiden(nodeId)
{
    var node = document.getElementById(nodeId);
    if (node)
    {
        node.style.display = 'none'; 
    } 

}
function show_button
</script>

<div id="Таблица 1">
<table>
<tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
</tr>
<tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

</div> 

<div id="Таблица 2" style="display:none">
<table>
<tr>
    <td>Я 1</td>
    <td>Я 2</td>
</tr>
<tr>
    <td>Я 3</td>
    <td>Я 4</td>
</tr>
</table>
</div>
<div id = "Скрыть кнопку для первой таблици" style="display:block">
<input type="BUTTON" value="Скрыть первую таблицу" onclick="table_1_hiden('Таблица 1');"/>
<div>

<div id = "Скрыть кнопку для второй таблици" style="display:block">
<input type="BUTTON" value="Показать вторую таблицу" onclick="table_2_show('Таблица 2');"/>
<div>

<div id = "Показать первую">
<input type="BUTTON" value="Показать первую" onclick="table_1_show('Таблица 1');"/>
</div>

<div id = "Скрыть вторую">
<input type="BUTTON" value="Скрыть Вторую" onclick="table_2_hiden('Таблица 2');"/>
</div>
   </BODY>
</HTML>

но надо сделать следующие, при нажатии на кнопку скрыть таблицу должно отображается вторая таблица и скрываться кнопка скрыть первую таблицу

Это сообщение отредактировал(а) Trotter - 7.6.2012, 10:32

Aliance

Дата 7.6.2012, 10:57 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Правила именования атрибута ID

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Trotter

Дата 7.6.2012, 12:37 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.10.2006
Где: Нижний Новгород

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

Aliance, как прикрутить вот это http://jsfiddle.net/Aliance/f925W/

вот к такой вот кнопки ?

Код


<span><a class="BACKBUTTON" hidefocus="true" id="B1" tableToggle = function()>
<img class="ICON" src="/test/table/i1next.gif"></a></span>

Код


<HTML>
   <HEAD>
       <TITLE>TEST</TITLE>
   </HEAD>
    <BODY>
<div id="table1">
<table>
<tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
</tr>
<tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

</div> 

<div id="table2" style="display:none">
<table>
<tr>
    <td>Я 1</td>
    <td>Я 2</td>
</tr>
<tr>
    <td>Я 3</td>
    <td>Я 4</td>
</tr>
</table>
</div>

<div id = "show1t" style="display:none">
<input type="BUTTON" value="show1t" onclick="hiden_button();"/>
</div>

<div id = "show2t" style="">
<input type="BUTTON" value="show2t" onclick="hiden_button();"/>
</div>

   </BODY>
</HTML>

Код


function hiden_button()
{
var table1 = document.getElementById('table1');
var table2 = document.getElementById('table2');
var show1t = document.getElementById('show1t');
var show2t = document.getElementById('show2t');
switch (show2t.id)

case 'show2t':
    table1.style.display = 'none';
    table2.style.display = 'block';
    show2t.style.display = 'none';
    break;
case 'show1t.id':
    table2.style.display = 'none';
    table1.style.display = 'block';
    show1t.style.display = 'block';
    break;
}

поправьте ошибки плиз, надо работать именно со значением id div'a -это вообще можно ?

вот ссылка для удобства:
http://jsfiddle.net/Trotter/Je6zR/

Это сообщение отредактировал(а) Trotter - 7.6.2012, 14:11

Aliance

Дата 7.6.2012, 17:59 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Код


<a class="BACKBUTTON" hidefocus="true" id="B1" tableToggle = function()>

что это вообще за жесть такая? Мой совет, учите азы.

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

Я дал рабочий пример кода в своем первом сообщении. Что там не так? То, что всего 1 кнопка? А это сильно важно? Если да - то сделать кнопку по аналогии довольно просто, главное не придумывать ничего лишнего.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

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