Question

过去几周我一直在安排一个日程安排网站。我将计划显示为PHP生成的html表。我使用合并单元格来显示事件。尝试使用JS删除事件时遇到问题。由于这些是合并的单元格，使用rowspan，我必须通过表格并在需要删除时重新添加空单元格。我的解决方案正常工作，当我的表包含一个合并的单元格，只有空单元格，但有一个更复杂的表，它失败。我无法真正理解它的错误，除了它不再正确找到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));
    }
}

JavaScript删除合并的表格单元格

1 个答案: