javascript 带有滚动条的表格,标题固定,带排序功能.

要实现带有滚动条的表格，标题固定和带排序功能的javascript，可以按照以下步骤进行：

要实现带有滚动条的表格，标题固定和带排序功能的javascript，可以按照以下步骤进行：

第一步：创建HTML基本结构

首先，需要在HTML文件中创建一个基本的表格结构。在表格头部固定，表格主体带有滚动条，需要对表格主体进行固定高度和overflow属性设置。

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>列名1</th>
        <th>列名2</th>
        <th>列名3</th>
      </tr>
    </thead>
    <tbody>
     <!-- 表格主体内容 -->
    </tbody>
  </table>
</div>

第二步：编写CSS样式

接下来，需要对CSS样式进行设置。实现表格固定和滚动条，需要给.table-container设置固定高度和overflow-y属性。

.table-container {
  height: 300px;
  overflow-y: scroll;
}

为了实现表格头部固定，可以使用CSS的position和z-index属性，使表格头部固定在页面顶部。

thead {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1;
}

为了实现排序功能，我们可以添加一些JavaScript脚本。

第三步：编写JavaScript代码

在JavaScript代码中，我们需要实现以下功能：

1. 获取表格头部
2. 给表格头部增加点击事件
3. 获取表格主体的所有行
4. 根据点击的表格头部，对表格主体进行排序
5. 显示排序后的表格

具体的JavaScript代码如下：

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementsByTagName("table")[0];
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("tr");
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[n];
      y = rows[i + 1].getElementsByTagName("td")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

在HTML中给表格头添加点击事件，并调用sortTable函数：

<thead>
  <tr>
    <th onclick="sortTable(0)">列名1</th>
    <th onclick="sortTable(1)">列名2</th>
    <th onclick="sortTable(2)">列名3</th>
  </tr>
</thead>

示例说明：

首先，我们可以在代码编辑器中创建一个HTML文件，按照以上步骤进行代码编写。我们可以在table的tbody中添加一些数据，以便查看排序功能是否正常。

示例一：演示表格排序

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th onclick="sortTable(0)">姓名</th>
        <th onclick="sortTable(1)">年龄</th>
        <th onclick="sortTable(2)">居住城市</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>28</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>22</td>
        <td>深圳</td>
      </tr>
      <!-- 此处省略多行数据 -->
    </tbody>
  </table>
</div>

示例二：演示表格滚动条

<style>
.table-container {
  height: 200px;
  overflow-y: scroll;
}
</style>
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>居住城市</th>
      </tr>
    </thead>
    <tbody>
      <!-- 此处省略多行数据 -->
    </tbody>
  </table>
</div>

这样就可以实现带有滚动条的表格，标题固定和带排序功能的javascript了。