javascript 实现表格排序

要实现JavaScript表格排序，可以使用JavaScript的Array对象和DOM操作来实现。首先，可以通过document.getElementById()方法来获取要进行排序的表格元素，并且使用getElementsByTagName()方法来获取表格的行和列,然后存储在数组中，对这个数组进行排序。

其次，可以使用addEventListener()方法给表头的每个单元格加上点击事件，当用户点击表头单元格时触发排序函数。在排序函数中，可以使用数组的sort()方法对行进行排序，然后重新遍历表格并用新的顺序重组行，实现表格的重新排序。

另外，还可以在单元格上添加一些小箭头或其他标识，以显示当前排序的方向。通过点击表头单元格时切换排序方向，或者给每列添加一个升序/降序按钮。

最后，最好对排序函数进行抽象，提高可复用性，使得它可以应用到不同的表格中。这样在其他需要排序的表格，只需要调用这个函数即可实现表格排序。

总之，JavaScript实现表格排序就是通过利用数组和DOM操作，监听表头的点击事件，调用排序函数，重新排列表格的行，通过这种方式来实现表格的排序功能。

相关问题

js实现table表格拖拽排序

实现表格拖拽排序可以使用HTML5的Drag and Drop API，下面是一个使用纯JavaScript实现的示例代码：

<table id="myTable">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
    </tr>
    <tr>
      <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
      <td>Row 3, Column 3</td>
    </tr>
  </tbody>
</table>

// 获取表格和表格行
var myTable = document.getElementById("myTable");
var rows = myTable.getElementsByTagName("tr");

// 遍历表格行，为每一行添加拖拽事件
for (var i = 0; i < rows.length; i++) {
  var row = rows[i];
  
  // 设置draggable属性为true
  row.draggable = true;
  
  // 添加dragstart事件
  row.addEventListener("dragstart", function(event) {
    // 设置拖拽的数据，这里使用了text/plain格式
    event.dataTransfer.setData("text/plain", event.target.innerHTML);
  });
  
  // 添加dragover事件
  row.addEventListener("dragover", function(event) {
    // 阻止默认的drop事件
    event.preventDefault();
    
    // 添加drop效果
    event.dataTransfer.dropEffect = "move";
  });
  
  // 添加drop事件
  row.addEventListener("drop", function(event) {
    // 阻止默认的drop事件
    event.preventDefault();
    
    // 获取拖拽的数据
    var data = event.dataTransfer.getData("text/plain");
    
    // 将数据插入到当前行之前
    this.parentNode.insertBefore(document.createElement("tr"), this).innerHTML = data;
    
    // 删除原来的行
    event.target.remove();
  });
}

在上面的代码中，我们首先获取了表格和表格行，然后遍历每一行，为每一行添加拖拽事件。在dragstart事件中，我们设置了拖拽的数据，这里使用了text/plain格式；在dragover事件中，我们阻止了默认的drop事件，并添加了drop效果；在drop事件中，我们获取了拖拽的数据，并将数据插入到当前行之前，然后删除原来的行。这样就实现了表格的拖拽排序。

js实现excel表格拖拽排序

要实现表格的拖拽排序，可以使用以下步骤：

1. 给表格中需要排序的行添加拖拽事件监听器。
2. 在拖拽开始时，记录被拖拽的行的索引。
3. 在拖拽过程中，使用一些视觉效果（比如改变背景颜色）来提示用户当前处于哪一行。
4. 在拖拽结束时，将被拖拽的行移动到目标位置，并更新表格数据。

下面是一个简单的实现示例：

HTML：

<table id="sortable-table">
  <thead>
    <tr>
      <th>名称</th>
      <th>数量</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>苹果</td><td>10</td><td>5</td></tr>
    <tr><td>香蕉</td><td>15</td><td>3</td></tr>
    <tr><td>橙子</td><td>8</td><td>4</td></tr>
    <tr><td>梨子</td><td>12</td><td>6</td></tr>
  </tbody>
</table>

JavaScript：

// 获取表格元素
const table = document.getElementById('sortable-table');
// 获取所有可拖拽的行
const rows = table.tBodies[0].rows;
// 记录被拖拽的行的索引
let draggingIndex = -1;

// 给所有可拖拽的行添加事件监听器
for (let i = 0; i < rows.length; i++) {
  const row = rows[i];
  // 记录当前行的索引
  row.draggingIndex = i;
  // 添加拖拽事件监听器
  row.addEventListener('dragstart', e => {
    // 记录被拖拽的行的索引
    draggingIndex = e.target.draggingIndex;
    // 设置拖拽效果
    e.dataTransfer.effectAllowed = 'move';
    // 设置拖拽数据
    e.dataTransfer.setData('text/html', row.innerHTML);
  });
  // 添加拖拽过程中的事件监听器
  row.addEventListener('dragover', e => {
    // 阻止默认行为，使得drop事件能够触发
    e.preventDefault();
    // 设置拖拽效果
    e.dataTransfer.dropEffect = 'move';
    // 获取当前鼠标所在的位置
    const y = e.clientY - table.offsetTop;
    // 遍历所有行，找到当前鼠标所在的位置应该插入的位置
    for (let j = 0; j < rows.length; j++) {
      const row = rows[j];
      if (y > row.offsetTop && y < row.offsetTop + row.offsetHeight) {
        // 如果拖拽的行和目标行不是同一行，则交换位置
        if (draggingIndex !== j) {
          table.tBodies[0].insertBefore(rows[draggingIndex], j > draggingIndex ? rows[j] : rows[j + 1]);
          break;
        }
      }
    }
  });
  // 添加拖拽结束的事件监听器
  row.addEventListener('dragend', e => {
    // 重置被拖拽的行的索引
    draggingIndex = -1;
  });
}

在这个示例中，我们使用了HTML5的拖拽API来实现表格的拖拽排序。在拖拽过程中，我们通过改变被拖拽的行和目标行的位置来实现排序。需要注意的是，这个示例只是一个简单的实现，如果需要支持更复杂的排序方式，比如拖拽多个行或者跨页排序，还需要进行更多的功能扩展。