JQuery: Можно ли отображать по клику различные строки таблицы

Ekaterina · 6 Окт 2008

JQuery: Можно ли отображать по клику различные строки таблицы

Есть меню, состоящее из двух таблиц. По клику по строке из первой таблице, должна отображаться одна из строк второй таблицы:

Код:

<div id="menu-container">
	<table id="dark">
	    <tr>
	        <td class="left">
	        	<img src="img/x.gif" hspace="0" vspace="0">
	        </td>
	        <td class="container">
				<table class="menu">
				    <tr>
				        <td class="left"></td>
				        <td class="items" id="menu-level-1">
				        	<a href="#" class="item" id="1">Р“Р»Р°РІРЅР°СЏ</a><img src="img/x.gif">
									<a href="#" class="item" id="2">Рћ РїРѕСЂС‚Р°Р»Рµ</a><img src="img/x.gif">
				        	<a href="#" class="item" id="3">РЎС‚СЂСѓРєС‚СѓСЂР°</a><img src="img/x.gif">
									<a href="#" class="item" id="4">РџСѓРЅРєС‚ РјРµРЅСЋ</a><img src="img/x.gif">
									<a href="#" class="item" id="5">Р‘РёР±Р»РёРѕС‚РµРєР°</a><img src="img/x.gif">
									<a href="#" class="item" id="6">Р_РµСЃСѓСЂСЃС‹</a><img src="img/x.gif">
									<a href="#" class="item" id="7">РљРѕРЅС‚Р°РєС‚С‹</a>						
						</td>
				        <td class="right"></td>
				    </tr>
				</table>
	        </td>
	        <td class="right">
	        	<img src="img/x.gif" hspace="0" vspace="0">
	        </td>
	    </tr>
	</table>
	<table id="light">
	    <tr>
	        <td class="left">
	        	<img src="img/x.gif" hspace="0" vspace="0">
	        </td>
	        <td class="container">
				<table class="menu">
				    <tr>
				        <td class="left"></td>
				       <td class="items" id="menu-level-2-1">
				        
				        	<a href="#" class="item" id="8">РџРѕРґРІРµРґРѕРјСЃС‚РІРµРЅРЅС‹Рµ РѕСЂРіР°РЅРёР·Р°С†РёРё</a><img src="img/x.gif">
									<a href="#" class="item" id="9">Р_РµСЃСѓСЂСЃС‹</a><img src="img/x.gif">
				        	<a href="#" class="item" id="10">РђРЅР°Р»РёС‚РёРєР°</a><img src="img/x.gif">
									<a href="#" class="item" id="11">Р§С‚Рѕ-РЅРёР±СѓРґСЊ РµС‰Рµ</a><img src="img/x.gif">
									<a href="#" class="item" id="12">РђРґРјРёРЅРёСЃС‚СЂР°С‚РѕСЂС‹</a><img src="img/x.gif">
									<a href="#" class="item" id="13">РџСѓРЅРєС‚</a>						
					   </td>
																		
				        <td class="right"></td>
				    </tr>
					
					<tr>
				        <td class="left"></td>
				      					
						<td class="items" id="menu-level-2-2">
				        
				        	<a href="#" class="item" id="14">РњРµРЅСЋ - 2-РѕР№ СѓСЂРѕРІРµРЅСЊ - 1</a><img src="img/x.gif">
									<a href="#" class="item" id="15">РњРµРЅСЋ - 2-РѕР№ СѓСЂРѕРІРµРЅСЊ - 2</a><img src="img/x.gif">
				        	<a href="#" class="item" id="10">РњРµРЅСЋ - 2-РѕР№ СѓСЂРѕРІРµРЅСЊ - РїСѓРЅРєС‚3</a><img src="img/x.gif">
									<a href="#" class="item" id="16">РњРµРЅСЋ - 2-РѕР№ СѓСЂРѕРІРµРЅСЊ - 4</a><img src="img/x.gif">
									<a href="#" class="item" id="17">РњРµРЅСЋ - 2-РѕР№ СѓСЂРѕРІРµРЅСЊ - 5</a><img src="img/x.gif">
									<a href="#" class="item" id="18">РњРµРЅСЋ - 2-РѕР№ СѓСЂРѕРІРµРЅСЊ - 6</a>						</td>
						
						<td class="right"></td>
				    </tr>
					
				</table>
	        </td>
	        <td class="right">
	        	<img src="img/x.gif" hspace="0" vspace="0">
	        </td>
	    </tr>
	</table>

Код:

$(
			function() {		
				   
				$("#menu-level-1> a.item, a.item-selected").click(
				   function(){
				   var elm = "#light #menu-level-2-"+$(this).attr("id");
				   $(elm).css("top",$("#menu-container > #dark ").offset().top + $("#menu-container > #dark").height()-2);
				   $(elm).css("left",$(this).offset().left);
				   
				   				   
				   if(this.className ="item")
				      this.className = this.className.replace("item","item-selected");		
				      
				   $(elm).css("visibility","visible");
				   
								   
				   });

Вопрос: по моим расчетам, строка с id = menu-level-2-2 должна отображаться на том же месте где и menu-level-2-1, но она (menu-level-2-2 ) отображается ниже, тоесть так как и расположена в таблице. Можно ли это как-то исправить. Или не в таблице надо хранить второй уровень. То есть мне надо, чтобы по клику на первом уровне отображалась соответствующая строка из второго уровня прямо под первым уровнем.

Wicked · 6 Окт 2008

попробуй поиграться с css-свойством display вместо visibility

Ekaterina · 7 Окт 2008

С расположением блоков все получилось, спасибо. А не получалось , потому что при использовании visibility = hidden
при скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним.

Но у меня возникла другая проблема: это переписанный скрипт:

$(
function() {

$("#menu-level-1> a.item, a.item-selected").click(
function(){
var elm = "#light #menu-level-2-"+$(this).attr("id");
$(elm).css("top",$("#menu-container > #dark ").offset().top + $("#menu-container > #dark").height()-2);
$(elm).css("left",$(this).offset().left);

if(this.className ="item")
this.className = this.className.replace("item","item-selected");

$(elm).css("display","inline");

});
А это css для елементов с class = items:

Код:

div#menu-container table#light td.container table.menu td.items{
                /*position: absolute;*/
                background-color: #c2e6fc;
				width: 100%;
				vertical-align: middle;
				border: 0;
				margin: 0px auto;
				padding: 0;		
				text-align: center;
                /*visibility: hidden;*/
                               display: none;
			}

CSS для элементов с классами item и item-selected:

Код:

div#menu-container table#light td.container table.menu td.items a.item,
				div#menu-container table#light td.container table.menu td.items a.item-selected{
                    background-color: #c2e6fc;
					float: left;
					text-decoration: none;
					text-align: center;
					vertical-align: middle;
					height: 100%;
					display: list-item;
					color: #333;
					padding: 5px 10px 5px 10px;
					max-width: 250px;
					width: expression(Math.min(parseInt(this.offsetWidth), 250 ) + "px");

Вопрос в том, что я назначаю отображение inline для элемента с классом items, то есть для ячейки таблицы, в которой идут друг за другом пункты меню, разделенные изображением. Так вот почему -то пункты меню переносятся по слова, а не отображаются в одну строку. При чем для первого блока меню
с id="menu-level-2-1" перенос происходит так:

Какой- | Еще | и тт.д.
нибудь какой-
пункт нибудь
пункт

А для id="menu-level-2-1" :
Меню 2-ой уровень 1 | Меню 2-ой уровень 2 | и т. д.
продолжение пункта

-~{}~ 07.10.08 11:13:

И еще одна странная особенность, вместо свойства display, я пробовала использовать позиционирование через position : absolute; Что привело к завершению работы Internet Explore с ошибкой: iexplore.exe - обнаружена ошибка. Приложение будет закрыто.

-~{}~ 07.10.08 11:14:

Ошибка появляется по клику.

cDLEON · 7 Окт 2008

элемент таблицы не влазит по ширине. Потому и происходит перенос. Можно убрать переполнения с помощью свойства overflow
А вообще, я бы посоветовал меню делать с помощью предназначенного для этого тега:

PHP:

<ul>
<li>asd</li>
<li>asd</li>
</ul>

Ekaterina · 7 Окт 2008

А вообще, я бы посоветовал меню делать с помощью предназначенного для этого тега:

Я не имею достаточного опыта в программировании на js, но во всех примерах связанных с меню, тоже везде встречались списки.
Кроме переполнения, какие еще убедительные аргументы можно привести человеку , который это все верстал? Подозреваю, что при использовании списков нам не надо рассчитывать положение элементов вложенных уровней относительно предыдущего. Моя задача заключается в аннимировании всего этого хозяйства, там еще вертикальное меню третьего уровня имеется, соответствующее каждому пункту второго уровня.
Не могли бы вы мне объяснить преимущества использования именно списков, чтобы я могла грамотно ответить человеку, который на меня наезжает. Или посоветовать, где про это почитат.

флоппик · 7 Окт 2008

Потому что меню — это список. Да?
А табличный тег придуман для отображения таблиц.

Ekaterina · 7 Окт 2008

элемент таблицы не влазит по ширине.

Странно, что когда я использовала visibility вместо display, то все вмещалось.

-~{}~ 07.10.08 13:25:

Можно убрать переполнения с помощью свойства overflow

Я применяю overflow:visible к div id="menu-container", который содержит все таблицы меню. Но отображается все так, как и прежде. Может я не то делаю?

maxwell · 7 Окт 2008

Ekaterina, наверняка не то, раз это не приводит к желаемому результату.

AmdY · 7 Окт 2008

display: list-item;
ржу нимогу, чел использует таблицы, чтобы потом превратить их в список.
пускай делает списки, а для li пропишет отступ слева и положит фоном картинку. я бы на таблицах не делал чисто из лени, куча лишних симолов приходится набирать, вместо
<ul id="menu">
<li><a href="">text</a></li>
</ul>

-~{}~ 07.10.08 14:40:

в правильно сделаном меню даже javascript не понадобится
http://www.cssplay.co.uk/menus/

-~{}~ 07.10.08 14:41:

маленький хак, засунь свой код в [ php ] тогда его читать на форуме будет удобнее

Ekaterina · 7 Окт 2008

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

JQuery: Можно ли отображать по клику различные строки таблицы

Ekaterina

Новичок

Wicked

Новичок

Ekaterina

Новичок

cDLEON

Онанист РНРСlub

Ekaterina

Новичок

флоппик

promotor fidei

Ekaterina

Новичок

maxwell

artifex

AmdY

Пью пиво

Ekaterina

Новичок