Прокрутить вниз по всем элементам таблицы с таким же именем класса строки - PullRequest
Новая
       7

Прокрутить вниз по всем элементам таблицы с таким же именем класса строки

0 голосов
/ 28 февраля 2019

У меня есть таблица с множеством строк.Все строки имеют параметр класса.Я хочу добавить кнопку «вниз», когда я нажимаю кнопку, я хочу прокрутить вниз до первого элемента класса «ошибка», когда я снова нажимаю кнопку «вниз», я хочу прокрутить вниз до второго элемента с классом «ошибка»ect.

JS 

<script>
var $currentElement = $(".error").first();

$("#down").click(function () {
    $currentElement = $currentElement.next();
    $('html, body').animate({
        scrollTop: $currentElement.offset().top
    }, 1000);
    return false;
});

$("#up").click(function () {
    var currentElement = $currentElement.prev();
    $('html, body').animate({
        scrollTop: $(currentElement).offset().top
    }, 1000);
    return false;
});

TABLE 

<table  id="example" class="table table-bordered table-dark">
  <thead>
    <tr>
        <!--<th scope="col"><small>Test ID</small></th>-->
        <th scope="col"><small>Name</small></th>
        <th scope="col"><small>Test</small></th>
        <th scope="col"><small>Start</small></th>
        <th scope="col"><small>End</small></th>
    </tr>
  </thead>
        <tbody>
        {% for element in record %}
        {% if element.1 == 'Failed' or element.1 == 'Error' %}

        <tr class="error">

        <td><small>{{ element.0 }}</small></td>
        <td><small><a href="{% url 'build_details' iteration element.6 %}" class="text-white">{{ element.6 }}</a></small></td>
        <td><small>{{ element.4|slice:"11:22" }}</small></td>
        <td><small>{{ element.5|slice:"11:22" }}</small></td>

        </tr>

    {% elif element.1 == 'Inconclusive' or element.1 == 'Warning' or element.1 == 'Timeout' or element.1 == 'Aborted' or element.1 == 'Notrunnable' or element.1 == 'Notexecuted' %}
        <tr class="bg-warning">
        <td><small>{{ element.0 }}</small></td>
        <td><small><a href="{% url 'build_details' iteration element.6 %}" class="text-white">{{ element.6 }}</a></small></td>
        <td><small>{{ element.4|slice:"11:22" }}</small></td>
        <td><small>{{ element.5|slice:"11:22" }}</small></td>

        </tr>

    {% elif element.1 == 'Passed' %}
        <tr class="bg-success">
        <td><small>{{ element.0 }}</small></td>
        <td><small><a href="{% url 'build_details' iteration element.6 %}" class="text-white">{{ element.6 }}</a></small></td>
        <td><small>{{ element.4|slice:"11:22" }}</small></td>
        <td><small>{{ element.5|slice:"11:22" }}</small></td>

        </tr>
    {% else %}
        <tr>
        <td><small>{{ element.0 }}</small></td>
        <td><small><a href="{% url 'build_details' iteration element.6 %}" class="text-white">{{ element.6 }}</a></small></td>
        <td><small>{{ element.4|slice:"11:22" }}</small></td>
        <td><small>{{ element.5|slice:"11:22" }}</small></td>

        </tr>
    {% endif %}


        {% endfor %}
        </tbody>
         <tfoot>
    <tr>
        <!--<th scope="col"><small>Test ID</small></th>-->
        <th scope="col"><small>Name</small></th>
        <th scope="col"><small>Test</small></th>

        <th scope="col"><small>Start</small></th>
        <th scope="col"><small>End</small></th>
    </tr>
  </tfoot>
</table>

Этот код нашел только первый хороший элемент.

1 Ответ

0 голосов
/ 28 февраля 2019

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

Сценарий: 

var elemCounter = 0;

function onClick(){
    var height = $($('.error')[elemCounter]).offset().top;
    var parent = $(".error").parent();
    parent.scrollTop(height);
    elemCounter ++;
    if($(".error").length < elemCounter)
        elemCounter = 0;
}

// JQuery Selector for clicking the button ..

$(document).on('click', 'scrollBtn' ,function(){
    var height = $($('.error')[elemCounter]).offset().top;
    $(".error").parent().scrollTop(height);
    elemCounter ++;
    if($(".error").length < elemCounter)
        elemCounter = 0;
}

// Use one of the above function

Вы можете использовать селектор класса / идентификатора для выбора родителя, здесь вы не упомянули родителя, поэтому я выбрал его с помощью Jquery.

И вы можете вызвать функцию, нажав на некоторую кнопку, например:

HTML: 

<button id="scrollBtn" onclick="onClick()">Click</button>
...