Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Разварачивание строк в таблице на jQyery (https://javascript.ru/forum/jquery/9079-razvarachivanie-strok-v-tablice-na-jqyery.html)

Suharik 28.04.2010 10:03

Разварачивание строк в таблице на 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 (естестввенно смотреть в таблице)

Suharik 28.04.2010 10:30

Да. Сама задача вот в чем))) Нужно чтобы при наведении на открывающийся див, он не сварачивался.

Suharik 28.04.2010 18:47

Как я понял подсказать никто не может. Может тогда кто знает как сделать аккордион без дивов в таблице
<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

e1f 28.04.2010 19:16

http://mediaformations.com/accordion...s-with-jquery/

Suharik 29.04.2010 09:43

это не пойдет. С таким же успехом я мог бы просто зацикленной таблицы присвоить уникальный ID и просто обычним кодом открывать и закрывать. примерно так.
openDiv = function (id) {
    document.getElementById(id).style.display = 'block';
};

closeDiv = function (id) {
    document.getElementById(id).style.display = 'none';
};

И дальше онкликом или онмаусом открывать и закрывать.
Мне хочется чтобы был реальный аккордион чтобы красиво открывал див))

e1f 29.04.2010 10:24

Цитата:

Сообщение от Suharik (Сообщение 53326)
Я его немного переделать для того чтобы строки раздвигались при наведении мыши:
<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>

А если вместо mouseover/out использовать mouseenter/mouseleave?

Цитата:

Сообщение от Suharik (Сообщение 53326)
а вот ссылка на то как у меня получилось http://locmankvartir.ru/search_obj (естестввенно смотреть в таблице)

Что-то там в таблице квартир нет никакого фолдинга, или я не туда смотрел?

Suharik 29.04.2010 10:28

да я убрал пока. Сейчас попробую и отпишу

Suharik 29.04.2010 10:40

Не помогло к сожалению. Код пока не убераю. Посмотрите.

e1f 29.04.2010 11:21

$('#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. У Вас какая-то трабла с раскраской таблицы. Она сто старта вся серая, а потом по наведению "зебреет" потихоньку.

Suharik 29.04.2010 11:31

Да, там просто еще один скриптик конфликтует)) про это я вкурсе))


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