Надо взять содержимое div (html) и вставить в другой div
Помогите пожалуйста.
Есть конструкция вида <a id="a1" href="#">Мамонтова А.А.<span><div>текст</div><p>текст</p></span></a> То что в спан - display none и по клику по ссылке мне надо вывести это в tooltip, вообщем в блок за пределами этой конструкции... У меня не получается никак... Подскажите пожалуйста куда рыть, что использовать. В заранее при много благодарен. Тултип работает, не знаю как именно содержимое дива всё обернуть и вставить в другой блок. |
<a href="#">Hello</a>
<span style="display: none;">World</span>
<script type="text/javascript">
window.onload = function(){
document.getElementsByTagName('a')[0].onclick = function(){
this.innerHTML = document.getElementsByTagName('span')[0].innerHTML;
return false;
};
};
</script>
|
$("#ТвойСелектор").AppendTo("#Твой Див") Для JQuery Это все что я накопал )
|
Вот вроде то что нужно тебе:
<script type="text/javascript">
window.onload = function () {
document.getElementsByTagName('a')[0].onclick = function () {
var span = document.getElementsByTagName('span')[0];
var div = document.getElementsByTagName('div')[1];
div.innerHTML = span.innerHTML;
}
}
</script>
<a id="a1" href="#">Мамонтова А.А.<span style="display:none;"><div>текст</div><p>текст</p></span></a>
<div style="width:100px; height:100px; border:1px black solid;"></div>
|
Пожайлуста,помогите . Не знаю как реализовать.
Нужно переместить контент c ID в совпадающие по ID ячейки по клику на контенте (в этом случае контент -это картинки). Буду признателен также и за подсказки на информацию относительно этой задачи
<img id="one" src="img1.jpg" width="100" height="100" />
<img id="two"src="img2.jpg"/>
<img id="three" src="img3b.jpg" />
<table width="200" border="1">
<tr>
<td id="one">id=one</td>
<td>***</td>
</tr>
<tr>
<td id="two">id=two;</td>
<td>***</td>
</tr>
<tr>
<td id="three">id=three</td>
<td>***</td>
</tr>
</table>
|
ID на странице не могут повторяться, они должны быть уникальными.
|
Андрей38, как вариант...
<!doctype html>
<html>
<head>
<style type="text/css">
</style>
<script>
function Go() {
var o=document.getElementById('scr')
var os=o.getElementsByTagName('img')
var i,on
var n=os.length-1
for (i=n; i>=0; i--) {
on=document.getElementById(os[i].className)
if (!on) {
continue
}
on.innerHTML=''
on.appendChild(os[i])
}
}
</script>
</head>
<body>
<div id='scr'>
<img class="one" src="http://javascript.ru/forum/images/smilies/smile.gif" />
<img class="two" src="http://javascript.ru/forum/images/smilies/thank_you2.gif"/>
<img class="three" src="http://javascript.ru/forum/images/smilies/victory.gif" />
</div>
<table id='info' width="200px" border="1">
<tr>
<td id="one">id=one</td>
<td>***</td>
</tr>
<tr>
<td id="two">id=two;</td>
<td>***</td>
</tr>
<tr>
<td id="three">id=three</td>
<td>***</td>
</tr>
</table>
<input type='button' value='Go' onclick='Go()'>
</body>
</html>
|
Огромнейшее СПАСИБО Вам, KSA! :thanks:
Вижу_здесь сильнейшиа алгоритм. Такое мне не понять :blink: Сохранил эту станицу и иду пробывать А можно такое же в ДжКвери :-? Мне оно очень помогает на начальном этапе. В Квери я могу уже что нибудь редактировать, поиграть с анимацией аппендов . За это время я вот какой скрипт откопал_ Предназначалось для анимации отдельных картинок_ по аналогии ховера . Почитал , и понял,что это - эта же тема . Готовый скрипт я отредактировал под себя_(беру не по ID а по title , так как учел замечания об уникальности Ай-Ди)и стер 2 строчки анимации
<SCRIPT>
$(document).ready(function(){
var imgid;
$("img").click(function(){
imgid = (this).title
$("td").each(function(){
if(this.title==imgid) $(this).append(imgid);
});
});});
</SCRIPT>
<IMG title=C
src="attr_TITLE : C photo.jpg"
width=120 height=60>
<IMG title=B
src="attr_TITLE : B photo.png"
width=95 height=88>
<TABLE id="H">
<TR>
<TD title=C></TD>
</TR>
</TABLE>
<TABLE id="g">
<TR>
<TD title=B></TD>
</TR>
</TABLE>
Источник http://www.webnotes.com.ua/index.php/archives/800 Но никак не могу справиться с тем , что нужно ,чтоб ЭТО самое TITLE (атрибут) цепляло свое родное ИЗОБРАЖЕНИЕ в append(imgid)...Здесь аппенд цепляет и заносит лишь голый ТЕКСТ этого поточного var imgid . Пожайлуста, подскажите , каких строк не достает в этом скрипте для его ПОЛНОЙ работоспособности ? |
Или же даже так:
<div id="images">
<img id="one" src="img1.jpg" width="100" height="100" />
<img id="two"src="img2.jpg"/>
<img id="three" src="img3b.jpg" />
</div>
<table width="200" border="1">
<tr>
<td id="c_one">id=one</td>
<td>***</td>
</tr>
<tr>
<td id="c_two">id=two;</td>
<td>***</td>
</tr>
<tr>
<td id="c_three">id=three</td>
<td>***</td>
</tr>
</table>
<script type="text/javascript">
$(function() {
$('#images img').click(function() {
$('#c_' + this.id).html('').append(this);
});
});
</script>
|
Цитата:
|
ОГРООООМНЕЙШЕЕ Спасибо Вам , уважаемые Гуру, KSA и SKY :thanks: :thanks: :thanks: !!!!!!
Спасибо Sky !!! Только сейчас увидел что Ваш код на jQuery и он совершенно готовый к применнению :thanks: :thanks: :thanks: ! Вы ОЧЕНЬ мне этим помогли .Просто нет слов !!!:write: . Неужели я теперь смогу наконец-то закончить свой сайт ?!! WOOOOW !!!! СУПЕР !!! SKY !!!! РАБОТАЕТ на УРА !!!! Просто ЧУДО !!! Я сохранил на комп. страницу с Вашим ответом под именем SKY ЧУДО :thanks: . Уважаемый SkyLight !Вы бы могли объяснить каким чудесным образом работает программа этого скрипта ???... Cпасибо Вам !Я уже добавил анимацию через финд().хайд().шов(). Красиво выглядит! Буду эксперементировать, чтоб прочувствовать механизм Вашего скрипта . С глубоким уважением _ Андрей 38 /Украина/ и ОГРОМНЕЙШЕЕ Спасибо !!! :) Чудо и все , SkyLight . Вот удивлю своих знакомых :lol: !!! |
Ну, помогать всегда хорошо. Но на будущее: ответ, найденный самостоятельно вдвойне приятней, поэтому учитесь, разбирайтесь и учите других.
|
SkyLight ! Я кажется проследил механику Вашего скрипта !
Ядром здесь является ('#c'+...). Когда Квери находит #C то #C дополняется '+' АйДиш-кой кликнутого (this) элемента.Получается целое слово , а так как #С есть элементом таблици , то получается , что клик произошел ОДНОВРЕМЕННО как бы и на элементе ТАБЛИЦИ именно с указанным АйДи ,благодаря (this)клику .HTML () опустошает прежнее содержимое такой ячейки и тут же хватает кликнутый(this) . ( НЕ опустошает -- $('#c' + this.id).append(this);) Так ? С почтением, Андрей 39. Вав! Так Красиво работает и с другими атрибутами . Классы только ,только , протестуют :) |
Почитал немного ... Поэксперементировал . .. Теперь работает с чем угодно !!!
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 11:06. |