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屋！