JavaScript削除のマージされた表のセル

Question

私はここ数週間、スケジューリングのウェブサイトで作業しています。私は、PHPで生成されたhtmlテーブルとしてスケジュールを表示しています。イベントを表示するために、結合されたセルを使用します。 JSを使用してイベントを削除しようとすると問題が発生しました。それらはマージされたセルで、rowspanを使用しているので、テーブルを削除して空のセルを再追加する必要があります。私のソリューションは、私のテーブルが空のセルだけで1つのマージされたセルを含んでいても、より複雑なテーブルではうまく動作しません。私は何が間違っているのかを実際に把握することはできませんが、cellIndexを正しく見つけることができないという点が異なります。誰かが手掛かりを持っていますか？ここで私が話しているものです：

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

Answer 1

This sampleを（それを削除、またはとにかくしようとしたイベントをクリックして）あなたの解決策を見つけるのに役立つことがあります。あなたの問題を示すだけでなく、それを解決するのに役立つ行列を生成するためのサンプルコードがあるようです。

EDIT：私は、パズルが好きで、ビットのためにそれで遊ぶことにしましたが、ここで時々表が正しく再描画していないようですが、（そのサンプルを実装する「機能」の例であるこれはおそらく、役立つはずですあなたが道に沿ってさらに取得する。

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