javascript - 具有固定标题的滚动表不起作用

Question

来自this thread ，我拿起code here .

我已经复制了它，但它对我不起作用。该表看起来像示例，但是当我滚动时，标题也会向上滚动。我想我一定在某个地方犯了错误，但看不到它，有人可以帮助我吗？

#wrap {
  float: left;
  overflow: auto;
  height: 300px;
  border: 1px solid black;
}

table {
  border-spacing: 0;
}

table>*>tr>* {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

table>tbody> :last-child>* {
  border-bottom: none;
}

th {
  background-color: lightskyblue;
}

<script>
  document.getElementById("wrap").addEventListener("scroll", function() {
    var translate = "translate(0," + this.scrollTop + "px)";
    this.querySelector("thread").style.transform = translate;
  });
</script>

<div id="wrap">
  <table>
    <thead>
      <tr>
        <th colspan="2">
          Colspanned Cell
        </th>
      </tr>
      <tr>
        <th>Foo bar baz qux quux lorem ipsum dolor sit amet consectetur adipisicing</th>
        <th>Foo Bar</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>This is a test</td>
        <td>This is a test</td>
      </tr>
      <tr>
        <td rowspan="3">Rowspanned cell</td>
        <td>Lorem ipsum dolor</td>
      </tr>
      <tr>
        <td>sit amet consectetur</td>
      </tr>
      <tr>
        <td>adipisicing</td>
      </tr>
      <tr>
        <td>testing 1 2 3</td>
        <td>testing 1 2 3</td>
      </tr>
      <tr>
        <td>a b c</td>
        <td>d e f</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>testing 1 2 3 4</td>
        <td>testing 1 2 3 4 5 6 7 8 9 0</td>
      </tr>
      <tr>
        <td>The quick brown fox jumps over the lazy dog</td>
        <td>HELLO WORLD!!!!</td>
      </tr>
      <tr>
        <td>Foo bar</td>
        <td>baz qux</td>
      </tr>
      <tr>
        <td>quux</td>
        <td>foo<br/>bar<br/>baz<br/>qux<br/>quux</td>
      </tr>
      <tr>
        <td>THE</td>
        <td>END</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您对所提供的代码片段有 2 个问题:

• 您的 JavaScript 代码中有一个拼写错误 this.querySelector("thread")。 ...，它应该是 this.querySelector("thead")。 ... *没有“r”

• 第二个，也是最重要的，“script 标签的位置。HTML 中的内容按照它们在源代码中的顺序进行解析/评估/执行。当处理器命中 script 标签并执行时它表示搜索到的元素尚未出现在 DOM 中。为此，您应该:

  • 使该代码段在整个文档加载后运行。例如:在 jQuery(function(){ .../* 这里 */}) 内或向主体添加处理程序。
    或
  • (更简单)将整个脚本标记/ block 在源代码中向下移动，位于您正在搜索的所有元素之后(我想说，至少是在关闭表格并关闭包装器 div 之前之后)。