Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Отобразить элемент (https://javascript.ru/forum/events/23161-otobrazit-ehlement.html)

SunTechnique 14.11.2011 16:55

Отобразить элемент
 
у меня есть таблица, которая содержит в себе множество других таблиц таким образом что каждая из них представлена в одну строку(то есть <table><tr><td></td></tr></table>).
мне надо сделать так, что бы по клику на такую "строковую таблицу" под данной таблицей появлялась панелька с опциями. то есть прямо под ней так будто панелька просто из под нее выезжает.

я пытался как-то делать:

function mClck(id){
		addElement(id);
	}

	function addElement(id){
		var ni = document.getElementById(id);
		ni.append('<table id="tb_editor" class="tb_editor" align="center"><tr><td>asdasd</td></tr></table>');
		$('.tb_editor').show("fast", function () {});
	}


в общем вот. данный код не работает. работал другой, но там у меня таблицы были уже добавлены с атрибутом display:none; а по клику я атрибут менял на БЛОК и эти панельки появлясь под всеми таблицами потому что эта панелька имеет общий класс "tb_editor" с данным атрибутом. но когда я по ИД пытался поменять атрибут оно не работало. когда класс указывал работало а когда ИД уникальный не работало.

вот код где я атрибутом проявлял табоицу:
function mClck(id){
//если ниже вместо ИД подставить класс то появятся панелька под всеми таблицами
		$(id).show("fast", function () {});
	}


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

SunTechnique 14.11.2011 17:00

заработало вот таким образом:
function mClck(id){
		document.getElementById(id).style.display = "block";
		//$(id).show("fast", function () {});
	}


почему show не работает ? хочется сделать анимацию.

Gozar 14.11.2011 17:25

потому что, для корректной работы нужно указать
style="display: none"


иначе jq не понимает что элемент свернут. Свернут элемент или нет jq смотрит именно в inline style.

SunTechnique 14.11.2011 17:34

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

SunTechnique 14.11.2011 17:35

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

SunTechnique 14.11.2011 17:36

как можно это сделать через append или подобное ? что бы панель появлялась прямо под таблицей на которой был клик.

Gozar 14.11.2011 18:23

Цитата:

Сообщение от SunTechnique (Сообщение 136424)
я так и сделал. указал в самом обьявлении тега данный атрибут. но все равно не работало пока не сделал чистым ява-скриптом как показано чуть чуть выше.

как показано чуть чуть выше ты ничего не сделал.

ни здесь:
Цитата:

Сообщение от SunTechnique (Сообщение 136420)
<table><tr><td></td></tr></table>

ни здесь:
Цитата:

Сообщение от SunTechnique (Сообщение 136420)
ni.append('<table id="tb_editor" class="tb_editor" align="center"><tr><td>asdasd</td></tr></table>');
	}


Gozar 14.11.2011 18:28

<!DOCTYPE html>
<html>
<head>
  <style>
      p { background:yellow; }
      </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Show it</button>

      <p style="display:none">Hello  2</p>
<script>
    $("button").click(function () {
    $("p").show("slow");
    });
    </script>

</body>
</html>


<!DOCTYPE html>
<html>
<head>
  <style>
      p { background:yellow; }
      </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Show it</button>

      <p>Hello  2</p>
<script>
    $("button").click(function () {
    $("p").show("slow");
    });
    </script>

</body>
</html>

SunTechnique 14.11.2011 21:04

спасибо попробую добавить
<script src="http://code.jquery.com/jquery-latest.js"></script>

Gozar 14.11.2011 22:33

Лучше уж тогда:
jquery-1.7.min.js

и да, если вы уж используете jq, то её нужно подключать.


Часовой пояс GMT +3, время: 19:56.