用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例

首先我们需要明确一下需求，我们的目标是实现一个可以调整table单元格高宽并且兼容合并单元格的功能。接下来，我会按照以下顺序来详细讲解具体的实现过程：

1. HTML结构
2. CSS样式
3. JS实现

1. HTML结构

我们需要在HTML中使用table标签，同时要注意设置table的class属性和id属性，以便于后续进行操作。下面是一个简单的HTML结构示例：

<table class="table-adjust" id="table-demo">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>180cm</td>
      <td>70kg</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>

2. CSS样式

接下来我们需要添加一些CSS样式，以便于界面的美化和交互效果的实现。在这里我们只需要添加一些基本的样式即可，例如设置表格宽度、表格单元格边框、表头样式等。下面是一个简单的CSS示例：

.table-adjust {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

.table-adjust th,
.table-adjust td {
  border: 1px solid #ccc;
  padding: 10px;
}

.table-adjust th {
  background-color: #f5f5f5;
  font-weight: bold;
  text-align: center;
}

3. JS实现

最后是我们实现目标的核心部分，我们需要使用JS编写具体的代码。在这里我们需要实现两个主要功能，第一个是调整单元格宽度和高度的功能，第二个是兼容合并单元格的功能。

3.1 调整单元格宽度和高度

在这里我们需要用到鼠标拖拽事件来实现单元格的宽度和高度的调整。下面是一个基本的实现方式：

// 获取所有th和td元素
var tds = document.querySelectorAll('#table-demo th, #table-demo td');

// 遍历所有单元格，给每个单元格添加拖拽事件
for (var i = 0; i < tds.length; i++) {
  var td = tds[i];
  // 给单元格添加mousedown事件
  td.addEventListener('mousedown', function (e) {
    // 检查是否在单元格右下角的调整区域内
    var adjustAreaWidth = 5; // 右下角调整区域宽度
    var adjustAreaHeight = 5; // 右下角调整区域高度
    var tdRect = this.getBoundingClientRect(); // 获取单元格的位置和大小
    var x = e.pageX - tdRect.left; // 获取鼠标在单元格中的位置
    var y = e.pageY - tdRect.top;
    if (x > tdRect.width - adjustAreaWidth && y > tdRect.height - adjustAreaHeight) {
      // 如果在调整区域内，给单元格添加mousemove事件
      var initialWidth = tdRect.width;
      var initialHeight = tdRect.height;
      document.addEventListener('mousemove', adjustTdSize);
      document.addEventListener('mouseup', removeEventListener);
      // 定义mousemove事件处理函数
      function adjustTdSize(e) {
        // 计算单元格的新宽度和高度
        var newWidth = e.pageX - tdRect.left;
        var newHeight = e.pageY - tdRect.top;
        td.style.width = newWidth + 'px';
        td.style.height = newHeight + 'px';
      }
      // 定义mouseup事件处理函数
      function removeEventListener() {
        document.removeEventListener('mousemove', adjustTdSize);
      }
    }
  });
}

上面的代码通过给单元格添加mousedown事件来检查鼠标是否在单元格的右下角调整区域内。如果是，就给单元格添加mousemove事件来实现单元格大小的调整。

3.2 兼容合并单元格

兼容合并单元格的实现比较复杂，需要在多个方面进行考虑。以下是一个简单的示例代码：

// 获取所有th和td元素
var tds = document.querySelectorAll('#table-demo th, #table-demo td');

// 定义一个空数组，并以table的colspan和rowspan属性生成数组
var tableArr = [];
for (var i = 0; i < tds.length; i++) {
  var td = tds[i];
  var rowspan = td.getAttribute('rowspan') || 1;
  var colspan = td.getAttribute('colspan') || 1;
  for (var j = 0; j < rowspan; j++) {
    if (!tableArr[j]) {
      tableArr[j] = [];
    }
    for (var k = 0; k < colspan; k++) {
      tableArr[j][k] = td;
      if (!(j === 0 && k === 0)) {
        // 将非左上角的单元格的display属性设置为none，以免重复显示
        td.style.display = 'none';
      }
    }
  }
}

// 给单元格添加鼠标滑过事件
for (var i = 0; i < tds.length; i++) {
  var td = tds[i];
  td.addEventListener('mouseover', function () {
    // 获取当前单元格在数组中的位置
    var tdRect = this.getBoundingClientRect();
    var x = tdRect.left + tdRect.width;
    var y = tdRect.top + tdRect.height;
    var row = -1;
    var col = -1;
    for (var i = 0; i < tableArr.length; i++) {
      if (y >= tableArr[i][0].getBoundingClientRect().top && y <= tableArr[i][0].getBoundingClientRect().bottom) {
        row = i;
        break;
      }
    }
    for (var i = 0; i < tableArr[row].length; i++) {
      if (x >= tableArr[row][i].getBoundingClientRect().left && x <= tableArr[row][i].getBoundingClientRect().right) {
        col = i;
        break;
      }
    }
    // 将左上角的单元格的display属性设置为初始值（即显示）
    tableArr[row][col].style.display = '';
    // 将当前单元格左边和上面的单元格的display属性都设置为none，以免重复显示
    for (var i = 0; i < col; i++) {
      tableArr[row][i].style.display = 'none';
    }
    for (var i = 0; i < row; i++) {
      tableArr[i][col].style.display = 'none';
    }
  });
}

上面的代码通过以table的colspan和rowspan属性生成一个二维数组tableArr来实现合并单元格的功能。同时，我们还需要给每个单元格添加mouseover事件来监控鼠标滑过的位置，并根据位置来判断应该显示哪些单元格。这里需要注意的是，我们应该将单元格的display属性设置为-none，以便于后面重复的单元格不会重复显示。

综上所述，我们可以通过上面的代码来实现一个高度自定义和兼容性较好的table单元格高宽调整和合并单元格的功能。当然，具体的实现方式可能还有很多种，以上只是其中的一种示例。

阅读剩余 73%