JavaScript удалить объединенную ячейку таблицы

Question

Я работаю над сайтом планирования в течение последних нескольких недель. Я показываю графики как PHP-сгенерированные HTML-таблицы. Я использую объединенные ячейки для отображения событий. Я пришел к проблеме при попытке удалить события с помощью JS. Так как это слитые ячейки, используя rowspan, я должен просмотреть таблицу и заново добавить пустые ячейки всякий раз, когда есть необходимость, когда я удаляю одну. Мое решение работает хорошо, когда моя таблица содержит одну объединенную ячейку среди пустых ячеек, но с более сложной таблицей происходит сбой. Я не могу понять, что с ним не так, за исключением того, что он больше не может правильно найти cellIndex. У кого-нибудь есть ключ? Вот о чем я говорю:

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

(Нажмите на событие, чтобы удалить его, или попытайтесь каким-либо образом)

Answer 1

Этот образец может помочь вам найти решение. Кажется, что он демонстрирует вашу проблему, а также имеет некоторый пример кода для генерации матрицы, которая поможет вам решить ее.

РЕДАКТИРОВАТЬ: Мне понравилась головоломка, и я решил немного поиграть с ней, вот «функциональный» пример реализации этого образца (хотя иногда кажется, что таблица перерисовывается неправильно. вероятно, поможет вам продвинуться дальше.

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