考虑到colspan和rowspan的Javascript获取表格单元格二维数组

Question

我有一个包含 colspans 和 rowspans 的表格，就像这个 5x3 表格:

<table id="test">
  <tr>
    <td colspan="2">1</td><td>2</td><td rowspan="2">3</td><td>4</td>
  </tr>
  <tr>
    <td>5</td><td colspan="2">6</td><td>7</td>
  </tr>
  <tr>
    <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
  </tr>
</table>

我想在 Javascript 中创建二维数组，其中包含给定坐标处的单元格 DOM 元素。
对于给定的示例，它如下(为简单起见，数字表示具有相应内容的 DOM 单元格元素):

[[1, 1, 2, 3, 4], [5, 6, 6, 3, 7], [8, 9, 10, 11, 12]]

你看，它就像 Javascript 属性 table.rows，但是带有 colspan/rowspan 的单元格出现了很多次。如果仅允许 colspan，则创建这样的数组并不困难 - 只需遍历 table.rows 并向数组单元格推送与 colspan 一样多的次数。然而，当还允许 rowspan 时，这就变得棘手了。

这是我的尝试:

  var tableEl = document.getElementById('test');
  var cells2D = [];
  var rows = tableEl.rows;
  var x = 0, y = 0;
  for (var r = 0; r < rows.length; ++r) {
    var cells = rows[r].cells;
    x = 0;
    for (var c = 0; c < cells.length; ++c) {
      var cell = cells[c];
      var colSpan = x + (cell.colSpan || 1);
      var rowSpan = y + (cell.rowSpan || 1);
      for (var x2 = x; x2 < colSpan; ++x2) {
        for (var y2 = y; y2 < rowSpan; ++y2) {
          if (!cells2D[y2]) cells2D[y2] = [];
          cells2D[y2][x2] = cell;
        }
        ++x;
      }
    }
    ++y;
  }

它不适用于示例，但如果我删除最后一列，它就会起作用。

Answer 1

我不确定这是否正确，但是我想出了以下代码，它找到了示例表的正确数组。

  var tableEl = document.getElementById('test');
  var cells2D = [];
  var rows = tableEl.rows;
  var rowsLength = rows.length;
  for (var r = 0; r < rowsLength; ++r) {
    cells2D[r] = [];
  }
  for (var r = 0; r < rowsLength; ++r) {
    var cells = rows[r].cells;
    var x = 0;
    for (var c = 0, cellsLength = cells.length; c < cellsLength; ++c) {
      var cell = cells[c];
      while (cells2D[r][x]) {
        ++x;
      }
      var x3 = x + (cell.colSpan || 1);
      var y3 = r + (cell.rowSpan || 1);
      for (var y2 = r; y2 < y3; ++y2) {
        for (var x2 = x; x2 < x3; ++x2) {
          cells2D[y2][x2] = cell;
        }
      }
      x = x3;
    }
  }