Форум

SunTechnique · #1 (**permalink**) 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 · #2 (**permalink**) 14.11.2011, 17:00

заработало вот таким образом:

function mClck(id){
		document.getElementById(id).style.display = "block";
		//$(id).show("fast", function () {});
	}

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

Gozar · #3 (**permalink**) 14.11.2011, 17:25

потому что, для корректной работы нужно указать

style="display: none"

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

SunTechnique · #4 (**permalink**) 14.11.2011, 17:34

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

SunTechnique · #5 (**permalink**) 14.11.2011, 17:35

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

SunTechnique · #6 (**permalink**) 14.11.2011, 17:36

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

Gozar · #7 (**permalink**) 14.11.2011, 18:23

Сообщение от SunTechnique

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

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

ни здесь:

Сообщение от SunTechnique

ни здесь:

Сообщение от SunTechnique

ni.append('<table id="tb_editor" class="tb_editor" align="center"><tr><td>asdasd</td></tr></table>');
	}

Gozar · #8 (**permalink**) 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 · #9 (**permalink**) 14.11.2011, 21:04

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

Gozar · #10 (**permalink**) 14.11.2011, 22:33

Лучше уж тогда:

jquery-1.7.min.js

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

Форум

Справочник

Discord чат

Курсы javascript