JavaScript刪除合併表格單元

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