Разварачивание строк в таблице на jQyery
Всем привет. Нашел один скриптик котрый разварачивает строки в таблице и снова сварачивает при клике.
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
//$("#report").jExpand();
});
</script>
Я его немного переделать для того чтобы строки раздвигались при наведении мыши:
<script type="text/javascript">
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").mouseover(function(){
$(this).next("tr").toggle();
$(this).find(".arrownext").toggleClass("up");
});
$("#report tr.odd").mouseout(function(){
$(this).next("tr").toggle();
$(this).find(".arrownext").toggleClass("up");
});
//$("#report").jExpand();
});
</script>
Но только работает это не так как хочется. При наведении на строку она все таки раздвигается, но если навести на тот див который развернулся, то все сварачивается и назварачивается див другой строки. Как можно поступить? Вот ссылка на сам скрипт http://ruseller.com/lessons.php?rub=32&id=346 а вот ссылка на то как у меня получилось http://locmankvartir.ru/search_obj (естестввенно смотреть в таблице) |
Да. Сама задача вот в чем))) Нужно чтобы при наведении на открывающийся див, он не сварачивался.
|
Как я понял подсказать никто не может. Может тогда кто знает как сделать аккордион без дивов в таблице
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "a" });
});
</script>
<div id="accordion"> <div> <a href="#">First</a> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> </div> <div> <a href="#">Second</a> <div>Phasellus mattis tincidunt nibh.</div> </div> <div> <a href="#">Third</a> <div>Nam dui erat, auctor a, dignissim quis.</div> </div> </div> Как вместо дивов сделать все это в table tr td |
|
это не пойдет. С таким же успехом я мог бы просто зацикленной таблицы присвоить уникальный ID и просто обычним кодом открывать и закрывать. примерно так.
openDiv = function (id) {
document.getElementById(id).style.display = 'block';
};
closeDiv = function (id) {
document.getElementById(id).style.display = 'none';
};
И дальше онкликом или онмаусом открывать и закрывать. Мне хочется чтобы был реальный аккордион чтобы красиво открывал див)) |
Цитата:
Цитата:
|
да я убрал пока. Сейчас попробую и отпишу
|
Не помогло к сожалению. Код пока не убераю. Посмотрите.
|
$('#report tr.odd').bind('mouseenter mouseleave', function(e) {
var self = $(this),
next = self.next();
if (next[0] === $(e.relatedTarget).closest('tr')[0]) {
return;
}
next.toggle();
self.find('.arrownext').toggleClass('up');
});
$('#report tr:not(.odd)').bind('mouseenter mouseleave', function(e) {
var self = $(this),
prev = self.prev();
if (prev[0] === $(e.relatedTarget).closest('tr')[0]) {
return;
}
self.toggle();
prev.find('.arrownext').toggleClass('up');
});
P.S. У Вас какая-то трабла с раскраской таблицы. Она сто старта вся серая, а потом по наведению "зебреет" потихоньку. |
Да, там просто еще один скриптик конфликтует)) про это я вкурсе))
|
Короче они стали просто открыты, и никаких действий не происходит.
|
О юный падаван!
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
Зачем убрал ты код этот важный? И обертку $(document).ready ты тоже снес, из недомыслия али по умыслу злому? |
$(function(){
$("#report tr:first-child").show();
$('#report tr:odd').addClass('odd').bind('mouseenter mouseleave', function(e) {
var self = $(this),
next = self.next();
if (next[0] === $(e.relatedTarget).closest('tr')[0]) {
return;
}
next.toggle();
self.find('.arrownext').toggleClass('up');
}).show();
$('#report tr:not(.odd)').bind('mouseenter mouseleave', function(e) {
var self = $(this),
prev = self.prev();
if (prev[0] === $(e.relatedTarget).closest('tr')[0]) {
return;
}
self.toggle();
prev.find('.arrownext').toggleClass('up');
}).hide();
});
Таким код должен твой быть, пути просветления чтобы достичь ты мог. |
О Великий Мастер e1f. Ты поставил меня на путь истенный и дал мне необходимые знания чтобы все заработало. Так и есть. ВСЕ ЗАРАБОТАЛО. СПАСИБО !!!!
|
Блин Как же все круто, только что же скрипт при наведении поднимает страницу на верх? ))
|
Что куда поднимает? Suharik, пробуем, фиксим, не получается -- показываем, что именно, демонстрируем баг-кит. Тогда можно расчитывать на помощь коллективного разума форума.
Или идем в раздел "Работа". |
Да, Вы правы. Я разабрался почему так. Если вдруг возникнет вопрос, буду готовится его задать))
|
Уважаемый E1f А почему же тепрь у меня первый тр скрывается? Как я понимаю за первый тр отвечает это $("#report tr:first-child").show(); но ве равно не получается сделать так чтобы он всегда был show() уже перепробовал все.
|
Вместо
$("#report tr:first-child").show();
и
$('#report tr:not(.odd)') //...
сделайте
$('#report tr:not(.odd, :first-child)')
Тепер first-child show не нужен. Все просто, правда? А теперь у Вас при наведении на строку таблицы выдается еррор Код:
a is undefined |
Ваш статус "Профессор" действительно подверждает Ваши знания. Я сейчас хожу на курсы JS в бауманский универститет, думаю скоро сам буду помогать новичкам. Спасибо Вам огромное. Действительно все работает. Надеюсь Вы не откажете в помощи в дальнейшем. Еще раз спасибо.
|
А что мне сделать чтобы вторая ТР была изначально открыта, а при наведени на другую строку она закрывалась, и новая открывалась?
|
$('tr:eq(1)').triggerHandler('mouseenter')
Подходит? UPD Почти подходит, но нужно разнести отдельно бинды для mouseenter/mouseleave и заменить toggle на show?hide непосредственно |
Ну почти получилось, Не понял как разнести бинды
|
$(...).bind('mouseenter', function(){
$(...).show();
}).bind('mouseleave', function(){
$(...).hide();
});
примерно так, селекторы и всё остальное сами подставите. |
$('#report tr.odd').bind('mouseenter mouseleave', function(e) {
var self = $(this),
next = self.next();
if (next[0] === $(e.relatedTarget).closest('tr')[0]) {
return;
}
if (e.type == 'mouseenter') {
next.show();
} else {
$('#report tr:not(.odd, :first-child)').hide();
}
self.find('.arrownext').toggleClass('up');
}).eq(0).triggerHandler('mouseenter');
$('#report tr:not(.odd, :first-child)').bind('mouseleave', function(e) {
var self = $(this),
prev = self.prev();
if (prev[0] === $(e.relatedTarget).closest('tr')[0]) {
return;
}
self.hide();
prev.find('.arrownext').toggleClass('up');
});
|
почти заработало)) только изначально все трки открываются сразу, а потом при наведении закрываются ))
|
Suharik, всмысле? Тот код, что в посте выше, так себя ведет?
|
01 $('#report tr.odd').bind('mouseenter mouseleave', function(e) {
02 var self = $(this), 03 next = self.next(); 04 05 if (next[0] === $(e.relatedTarget).closest('tr')[0]) { 06 return; 07 } 08 09 if (e.type == 'mouseenter') { 10 next.show(); 11 } else { 12 $('#report tr:not(.odd, :first-child)').hide(); 13 } 14 15 self.find('.arrownext').toggleClass('up'); 16 }).eq(0).triggerHandler('mouseenter'); 17 18 $('#report tr:not(.odd, :first-child)').bind('mouseleave', function(e) { 19 var self = $(this), 20 prev = self.prev(); 21 22 if (prev[0] === $(e.relatedTarget).closest('tr')[0]) { 23 return; 24 } 25 26 self.hide(); 27 prev.find('.arrownext').toggleClass('up'); 28 }); Этот код ведет себя так (http://www.locmankvartir.ru/search_obj) |
Цитата:
Вставьте в нужное место hide. |
Так и не понял куда хид девать. Ладно пойду домой, дома буду пробовать. А Вы специально недоделываете код чтобы дать мне возможность помучится? ))
|
$(function(){
$('#report tr:not(.odd, :first-child)').bind('mouseleave', function(e) {
var self = $(this),
prev = self.prev();
if (prev[0] === $(e.relatedTarget).closest('tr')[0]) {
return;
}
self.hide();
prev.find('.arrownext').toggleClass('up');
})*!*.hide();*/!*
$('#report tr.odd').bind('mouseenter mouseleave', function(e) {
var self = $(this),
next = self.next();
if (next[0] === $(e.relatedTarget).closest('tr')[0]) {
return;
}
if (e.type == 'mouseenter') {
next.show();
} else {
$('#report tr:not(.odd, :first-child)').hide();
}
self.find('.arrownext').toggleClass('up');
}).eq(0).triggerHandler('mouseenter');
}());
Цитата:
|
Спасибо все заработало. Но я именно в то место ставил хиде, но не работало. Видемо надо было надо было поменять местами. И подскажите, зачем в 30 строке Вы сделали дополнительные скобки ()?
|
Скажите а есть решение еще такой задачи. Нужно чтобы при отводе мыши из таблицы, тр не закрывался))
|
Дополнительные скобки -- это очепятка :)
Решение есть. Думайте. |
К сожалению не смог додуматся. На сколько я понял что нужно сделать условие типо такова if (e.type == 'mouseleave') {
.eq(0).triggerHandler('mouseenter'); } Но это не работает) просто не силен в jQuery да и в самом JS не очень. учусь пока)) |
Вот вариант. В этом случае все намного проще.
$(function(){
// this part must be done in css, not here!
// show first row
$('#report tr:first-child').show().
// and hide all tips
siblings(':nth-child(2n+1)').hide();
$('#report tr:odd').unbind().bind('mouseenter', function() {
// row
var self = $(this),
// tip
next = self.next();
// if tip already visible -- don't do anything
if (next.is(':visible')) {
return;
}
// instead of show/hide, much better add/remove special class
// show tip
next.show().
// and hide all another tips
siblings(':not(:nth-child(2n), :first-child)').hide();
// don't know, what is that
self.find('.arrownext').toggleClass('up');
}).
// no need to do eq(0) -- why?
triggerHandler('mouseenter');
});
Разберитесь хотя бы, как это работает. |
// don't know, what is that
26 self.find('.arrownext').toggleClass('up'); Это делает картинку arrow.png если мышь наведена то картинка меняется. А откуда Вы взяли это (2n+1), это с jQuery или сами придумали, и для чего это? |
Suharik, Вас действительно на гугле забанили?
|
Очень смешно! но все равно спасибо. Пошел учить английский язык.
|
Мда. А если на вторую ссылку в выдаче нажать? Там русская дока по jQuery, вообще-то
|
| Часовой пояс GMT +3, время: 04:09. |