JavaScript supprimer cellule de tableau fusionné

Question

J'ai travaillé sur un site Web de planification au cours des dernières semaines. Je montre les horaires comme PHP a généré des tables html. J'utilise des cellules fusionnées pour montrer des événements. Je suis venu à un problème en essayant de supprimer des événements en utilisant JS. Comme ce sont des cellules fusionnées, en utilisant rowspan, je dois parcourir la table et rajouter des cellules vides chaque fois que j'en ai besoin. Ma solution fonctionne correctement lorsque ma table contient une cellule fusionnée parmi des cellules vides, mais avec une table plus complexe, elle échoue. Je ne peux pas vraiment comprendre ce qui ne va pas, sauf qu'il ne trouve plus correctement le cellIndex. Est-ce que quelqu'un a une idée? Voici ce que je parle:

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

(Cliquez sur un événement pour le supprimer, ou tenter de toute façon)

Answer 1

This sample peut vous aider à trouver votre solution. Il semble démontrer votre problème ainsi que d'avoir un exemple de code pour générer une matrice pour vous aider à le résoudre. J'ai aimé le puzzle et j'ai décidé de jouer un peu avec, voici un exemple "fonctionnel" de l'implémentation de cet exemple (bien que parfois la table ne semble pas redessiner correctement. vous aller plus loin le long du chemin.

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