考虑到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 中创建 2D 数组，其中包含给定坐标处的单元格 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;
    }
  }

Answer 2

我需要做同样的事情，但是在 C# 中（使用 AngleSharp 库），所以我移植了Somnium 的答案：

static IHtmlTableCellElement[,] GetTableEffectiveCells(IHtmlTableElement table)
{
    var rowCount = table.Rows.Length;
    var columnCount = table.Rows.Max(row => row.Cells.Length);
    var cells = new IHtmlTableCellElement?[rowCount, columnCount];

    for (var r = 0; r < rowCount; r++)
    {
        var x = 0;

        foreach (var cell in table.Rows[r].Cells)
        {
            while (cells[r, x] != null) x++;

            var x3 = x + cell.ColumnSpan;
            var y3 = r + cell.RowSpan;

            for (var y2 = r; y2 < y3; y2++)
            for (var x2 = x; x2 < x3; x2++)
                cells[y2, x2] = cell;

            x = x3;
        }
    }

    return cells!;
}