Javascript Delete Merged Table Cell

I have been working on a scheduling website for the past few weeks. I am showing the schedules as PHP generated html-tables. I use merged cells for showing events. I have come to a

Solution 1:

This sample may help you find your solution. It seems to demonstrate your problem as well as have some sample code to generate a matrix to help you solve it.

EDIT: I liked the puzzle and decided to play with it for a bit, here is a "functioning" example of implementing that sample (although sometimes the table doesn't seem to redraw correctly. This should probably help you get further along the way.

function getTableState(t) {
    varmatrix= [];
    varlookup= {};
    vartrs= t.getElementsByTagName('TR');
    var c;
    for (var i=0; trs[i]; i++) {
      lookup[i] = [];
        for (var j=0; c = trs[i].cells[j]; j++) {
            varrowIndex= c.parentNode.rowIndex;
            varrowSpan= c.rowSpan || 1;
            varcolSpan= 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 rowfor (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] = []; }
                varmatrixrow= 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)
      {
        varrow= cell.parentNode.rowIndex;
        varcol= cell.cellIndex;
        returnthis.lookupTable[row][col];          
      },
      // returns the "point" to insert at for a square in the perceived row/column
      getPointForRowAndColumn: function (row,col)
      {
        varmatrixRow=this.cellMatrix[row];
        varret=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 deletionvarnumRows= e.target.rowSpan;
    varcellIndex= e.target.cellIndex;
    varrowIndex= e.target.parentNode.rowIndex;
    vartable= e.target.parentNode.parentNode;

    vartableState= getTableState(table);

    varcolIndex= tableState.getRealColFromElement(e.target);

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

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