Question

单击链接导航到另一页后，我必须滚动“ tbody” div顶部的第一个（最早的）警报发生（标记为红色文本）。每行都有id='tab_content'和一个表数据class = 'td_list_row_center'。发生警报时，tds将颜色从黑色更改为红色，并将名称更改为class = 'td_list_row_center font-red"。

我已经尝试处理红色的出现，如果找到红色，请在“ tbody” div内的顶部滚动。第二行应使用黑色字体（非警报）

<script>
    function scrollToFirstRedAlarmOccurence(red_occurrence) {
        $('tbody').animate({
            scrollTop: red_occurrence.offset().top
        }, 2000);
    }

    var red_occurrence = document.getElementsByClassName("td_list_row_center font-red");

    if(red_occurrence)
        scrollToFirstRedAlarmOccurence(red_occurrence);
    else
        null
</script>

单击链接并显示表格后，没有任何反应（例如脚本不起作用）。我希望它可以滚动到巨大数据集中的第一个红色出现。向上滚动表格后，我会在以后看到另一个红色事件。以下为图片的实际和预期结果：

[实际分辨率]-> https://ibb.co/1zn4ty9
[期望的分辨率。]-> https://ibb.co/Jy6FrL6

Answer 1

“ getElementsByClassName”的参数不正确。如下使用它们。

<script>
  function scrollToFirstRedAlarmOccurence(red_occurrence) {
    // make jQuery object for first element
    $('tbody').animate({
      scrollTop: $(red_occurrence[0]).offset().top,
    }, 2000);
  }
  setTimeout(() => {
    // select "font-red" classed elements
    var red_occurrence = document.getElementsByClassName("font-red"); // you can use jQuery selector too
    if(red_occurrence.length) { // check for array length
      scrollToFirstRedAlarmOccurence(red_occurrence);
    }
  }, 1000); // wait for DOM to render
</script>

基本上，您可以调试代码以检查它们是否获得正确的值。我已进行了一些更正，这将适合您的情况。

将第一次出现滚动到div中的最高位置

1 个答案: