时间戳

首页 > 解决方案 > 向下滚动具有相同行类名称的所有表格元素

javascript - 向下滚动具有相同行类名称的所有表格元素

问题描述

我有很多行的表。所有行都有类参数。我想添加按钮“向下”，当我单击按钮时，我想向下滚动到类“错误”的第一个元素，当我再次单击按钮“向下”时，我想向下滚动到第二个元素，类为“错误”等等。

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  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>

此代码仅发现第一个元素很好。

标签： javascriptjqueryhtml-table

解决方案

您可以为此目的使用计数器变量，

脚本：

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

您也可以使用class/id 选择器来选择父级，这里您没有提到父级，所以我使用 Jquery 选择了它。

您可以在单击某些按钮时调用您的函数，例如：

HTML：

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

推荐阅读