JavaScript删除合并的表格单元格 [英] JavaScript delete merged table cell

问题描述

过去几周我一直在调度网站。我将计划显示为PHP生成的html表。我使用合并的单元格来显示事件。尝试使用JS删除事件时遇到了问题。由于这些是合并的单元格，使用rowspan，我必须通过表格，并在需要删除时重新添加空单元格。我的解决方案正常工作，当我的表包含一个合并的单元格，只有空单元格，但有一个更复杂的表，它失败。我无法真正理解它的错误，除了它不再正确找到cellIndex。有人有线索吗？以下是我所说的：

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 problem when trying to delete events using JS. Since those are merged cells, using rowspan, I have to go through the table and re-adding empty cells whenever there is a need when I delete one. My solution is working fine for when my table contains one merged cell among nothing but empty cells, but with a more complex table, it fails. I can't really grasp what's wrong with it, except that it doesn't correctly find the cellIndex anymore. Does anyone have a clue? Here is what I'm talking about:

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

（点击某个活动将其删除，或尝试无论如何）

(Click on an event to remove it, or attempt to anyhow)

推荐答案

这示例可以帮助您找到解决方案。它似乎证明了你的问题以及一些示例代码来生成一个矩阵来帮助你解决它。

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.

编辑：我喜欢拼图并决定稍微玩一下，这是一个实现该样本的功能示例（虽然有时候表格似乎没有正确重绘。这应该可以帮助你进一步发展。

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) {
    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删除合并的表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！