JavaScript 删除合并的表格单元格

过去几周我一直在开发一个日程安排网站。我将时间表显示为 PHP 生成的 html 表格。我使用合并单元格来显示事件。我在尝试使用 JS 删除事件时遇到了问题。由于这些是合并单元格，使用行跨度，当我删除一个单元格时，我必须遍历表格并在需要时重新添加空单元格。当我的表格只包含一个合并单元格而只有空单元格时，我的解决方案工作正常，但对于更复杂的表格，它会失败。我真的无法理解它出了什么问题，除了它不再正确找到 cellIndex 之外。有人有线索吗？这就是我要说的：

http://aturpin.mangerinc.com/table.html

（单击一个事件将其删除，或尝试无论如何）

这个样本可能会帮助您找到解决方案。它似乎演示了您的问题，并且有一些示例代码来生成矩阵来帮助您解决它。

EDIT:我喜欢这个谜题，并决定玩一会儿，这是一个实现该示例的“功能”示例（尽管有时表格似乎没有正确重绘。这可能会帮助您走得更远。

function getTableState(t) {
    var matrix = [];
    var lookup = {};
    var trs = t.getElementsByTagName('TR');
    var c;
    for (var i=0; trs[i]; i++) {
      lookup[i] = [];
        for (var j=0; c = trs[i].cells[j]; j++) {
            var rowIndex = c.parentNode.rowIndex;
            var rowSpan = c.rowSpan || 1;
            var colSpan = c.colSpan || 1;
            var firstAvailCol;

            // initalized the matrix in this row if needed.
            if(typeof(matrix[rowIndex])=="undefined") { matrix[rowIndex] = []; }

            // Find first available column in the first row
            for (var k=0; k<matrix[rowIndex].length+1; k++) {
                if (typeof(matrix[rowIndex][k])=="undefined") {
                    firstAvailCol = k;
                    break;
                }
            }
            lookup[rowIndex][c.cellIndex] = firstAvailCol;
            for (var k=rowIndex; k<rowIndex+rowSpan; k++) {
                if(typeof(matrix[k])=="undefined") { matrix[k] = []; }
                var matrixrow = matrix[k];
                for (var l=firstAvailCol; l<firstAvailCol+colSpan; l++) {
                    matrixrow[l] = {cell: c, rowIndex: rowIndex};
                }
            }
        }
    }

    // lets build a little object that has some useful funcitons for this table state.
    return {
      cellMatrix: matrix,
      lookupTable: lookup,

      // returns the "Real" column number from a passed in cell
      getRealColFromElement: function (cell)
      {
        var row = cell.parentNode.rowIndex;
        var col = cell.cellIndex;
        return this.lookupTable[row][col];          
      },
      // returns the "point" to insert at for a square in the perceived row/column
      getPointForRowAndColumn: function (row,col)
      {
        var matrixRow = this.cellMatrix[row];
        var ret = 0;
        // lets look at the matrix again - this time any row that shouldn't be in this row doesn't count.
        for (var i=0; i<col; i++)
        {
          if (matrixRow[i].rowIndex == row) ret++;
        }
        return ret;
      }
    };
}

function scheduleClick(e)
{
    if (e.target.className != 'event')
        return;

    //Get useful info before deletion
    var numRows = e.target.rowSpan;
    var cellIndex = e.target.cellIndex;
    var rowIndex = e.target.parentNode.rowIndex;
    var table = e.target.parentNode.parentNode;

    var tableState = getTableState(table);

    var colIndex = tableState.getRealColFromElement(e.target);

    //Deletion
    e.target.parentNode.deleteCell(cellIndex);

    //Insert empty cells in each row
    for(var i = 0; i < numRows; i++)
    {
        var row = table.rows[rowIndex + i];
        row.insertCell(tableState.getPointForRowAndColumn(rowIndex+i, colIndex));
    }
}