Question

下面的Js代码段适用于单个html表（class = mtable），基本上，当我在表上向左滚动时，它将冻结第一列。当我有多个“ mtable”类html表时，在一个表上滚动将导致所有表同时滚动时，它的行为不正确。我应该如何解决这个问题，以便每个表都可以独立工作？

$(document).on('mouseover', '.mtable tbody', function(){
    // alert('scrolling');
    $('.mtable tbody').on('scroll', function() {
      $('.mtable thead').css("left", -$(".mtable tbody").scrollLeft());
      $('.mtable thead tr th:first-child').css("left", $(".mtable tbody").scrollLeft()-2);
      $('.mtable tbody tr td:first-child').css("left", $(".mtable tbody").scrollLeft()-2);
    });
});

Answer 1

您需要存储对当前.mtable元素的引用，然后仅基于该表调用DOM遍历函数，如下所示：

$(document).on('mouseover', '.mtable tbody', function() {
  var $tbody = $(this);
  var $table = $tbody.closest('.mtable');
  var $thead = $table.find('thead');

  var $tbody = $table.find('tbody').off('scroll').on('scroll', function() {
    $thead.css("left", -$tbody.scrollLeft());
    $thead.find('tr th:first-child').css("left", $tbody.scrollLeft() - 2);
    $tbody.find('tr td:first-child').css("left", $tbody.scrollLeft() - 2);
  });
});

当关联类具有多个实例时，JavaScript的行为不正确

1 个答案: