JavaScript löschte zusammengeführte Tabellenzelle

Question

Ich habe in den letzten paar Wochen an einer Planungs-Website gearbeitet. Ich zeige die Zeitpläne als PHP generierte HTML-Tabellen. Ich verwende verbundene Zellen, um Ereignisse anzuzeigen. Ich habe ein Problem beim Versuch, Ereignisse mit JS zu löschen. Da diese Zellen mit rowspan verschmolzen sind, muss ich durch die Tabelle gehen und leere Zellen immer dann neu hinzufügen, wenn ich sie löschen muss. Meine Lösung funktioniert gut, wenn meine Tabelle eine verbundene Zelle aus nichts als leeren Zellen enthält, aber bei einer komplexeren Tabelle schlägt sie fehl. Ich kann nicht wirklich begreifen, was damit nicht stimmt, außer dass es den cellIndex nicht mehr korrekt findet. Hat jemand eine Ahnung? Hier ist, was ich rede:

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

(Klicken Sie auf ein Ereignis, es zu entfernen, oder versuchen, irgendwie)

Answer 1

This sample kann Ihnen helfen, Ihre Lösung zu finden. Es scheint, Ihr Problem sowie einige Beispielcode zu zeigen, um eine Matrix zu erzeugen, um Ihnen zu helfen, es zu lösen.

EDIT: Ich mochte das Puzzle und entschied mich, ein bisschen damit zu spielen, hier ist ein "funktionierendes" Beispiel zur Implementierung dieses Beispiels (obwohl manchmal die Tabelle nicht korrekt neu zu zeichnen scheint. Dies sollte wahrscheinlich helfen Sie erhalten weiter auf dem Weg.

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