Строка таблицы slideToggle с использованием Jquery

Question

Я уже больше недели пытаюсь сдвинуть строку таблицы, когда нажата кнопка «больше информации», но, похоже, ничего не работает.

Я новичок в Jquery, поэтому, если кто-нибудь может мне помочь, сдвиньте тэги 'more-info-1', 'more-info-2', 'more-info-3' tr. основная проблема заключается в том, что эти идентификаторы создаются динамически через php, и я не понимаю, как выбрать их в Jquery - например, используя 'more-info-' или что-то в этом роде.

Я бы хотел, чтобы это работало так: Здесь минус фреймы, конечно.

Пользователь нажимает кнопку «дополнительная информация», а затем «дополнительная информация» перемещается вниз.

Вот исходный код страницы: (Я не знаю, как правильно вставить HTML в Stack OverFlow, есть ли особый способ сделать это - кнопка кода не работает должным образом с HTML)

    html

div id="output-listings"

    div class="main-info"

        table class="listings"

            tbody

                    tr id="more-info-1" class="mi-1"

                        td

                        div id="more-1" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-1"

                        tdLeftlane News/td

                        tdwww.leftlanenews.com//td

                        tda id="link-1" class="more-info-link" href="#"More info/a/td

                    /tr

                    tr id="more-info-2" class="mi-2"

                        td

                        div id="more-2" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-2"

                        tdMotor Authority/td

                        tdwww.motorauthority.com/ /td

                        tda id="link-2" class="more-info-link" href="#"More info/a/td

                    /tr

                    tr id="more-info-3" class="mi-3"

                        td

                        div id="more-3" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-3"

                        tdAutoblog/td

                        tdhttp://www.autoblog.com//td

                        tda id="link-3" class="more-info-link" href="#"More info/a/td

                    /tr

            /tbody

        /table

    /div

/div!--end output-listings--

/html

Буду очень признателен за помощь.

Answer 1

Несмотря на то, что ответ Craig работает, вы можете ограничить свой код и позволить jquery захватить все ваши элементы TR в определенной области, а также проанализировать id, как он предложил, и т. Д.

$(".listings tbody tr").each(function(index) {
    // hide by default
    $(this).css({'display': 'none'});


    // set the onclicks
    $(this).click(function() {
      // your dosomething can change your appearance
      dosomething(the_id_you_parse_out);
    });
});

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

Answer 2

Поскольку код jquery обычно выполняется только тогда, когда DOM готов, вы всегда будете видеть TR, даже если только в течение миллисекунды, пока ваш код js не скрывает его, если вы изначально не используете CSS для его скрытия.

Так что большинство участников здесь, вероятно, ответили на ваш вопрос. Я просто хотел бы добавить, что вы можете сначала скрыть TR, используя CSS, а затем использовать JS, чтобы сделать все остальное.

Хорошее практическое правило - попытаться получить просмотр страницы по умолчанию, используя только CSS, а затем добавить расширенную функциональность с помощью кода jquery. Или, по крайней мере, это то, что я бы сделал.

Answer 3

В зависимости от того, нужно ли вам присваивать определенный идентификатор вашим элементам для другой цели, вы можете сделать это без необходимости давать индивидуальные идентификаторы.

В этом примере при загрузке мы сначала скрываем все tr, которые имеют переключаемый класс. Затем мы сообщаем jQuery, что нужно перепрыгнуть через пару уровней и скрыть следующую tr - это устраняет необходимость вызывать id.

Пример jQuery для этого:

$(document).ready(function(){

$("#tableToggle tr.toggleable").hide();

$("#tableToggle .tableToggleButton").click(function(){
    $(this).parent().parent().next('tr').slideToggle();                                                 
});

});

Пример модифицированной таблицы:

<table id="tableToggle">
<tbody>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
</tbody>
</table>

Answer 4

Для того, чтобы trs не были видны, добавьте к ним стиль = 'display: none'.

Answer 5

На первый взгляд кажется, что вы хотите что-то подобное.

$('#link-1').click(function(){
    $('#more-info-1').slideToggle()
})

Вы также можете обобщить этот сценарий для работы со всеми тремя, изменив настройку классов или попросив внутреннюю функцию проанализировать номер нажатой ссылки и передать ее во внутренний вызов jQuery:

$('.more-info-link').click(function(){
    var id = $(this).attr('id');
    var num = id.substr(id.length-1,1);
    $('#more-info-'+num).slideToggle();
})