JavaScript 删除合并的表格单元格

Question

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

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

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

Answer 1

This sample 可以帮助您找到解决方案。它似乎证明了您的问题，并且有一些示例代码可以生成一个矩阵来帮助您解决它。

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

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));
    }
}