Rimozione di rowspan da una tabella in jquery

Ecco una tabella che puoi cliccare e trascinare verso il basso in rowspan. Ho aggiunto la funzione removeCellSpan () per ripristinare la cella spanning al suo valore predefinito. Può reimpostare correttamente il rowspan su 0 per $ thisCell e aggiungere gli elementi td alle righe appropriate che sono state spanate. Il problema è che questi elementi appena aggiunti non sono riconosciuti dal resto della tabella e non possono essere evidenziati. Sembra che tutte le colonne vengano compensate da 1. Cosa mi manca?

EDIT: lo snippet è lungo, ma illustra perfettamente il problema. Fare clic sul pulsante “+” per aggiungere un appuntamento nella pianificazione, fare clic con il pulsante destro del mouse per eliminare l’appuntamento. Il problema sorge quando si tenta di pianificare nuovamente lo stesso appuntamento nella stessa sezione.

function addAppt() { $('td').css('cursor', 'cell'); $('textarea').css('cursor', 'cell'); var $table = $("#myTable tbody"); var $rows = $table.children("tr"); var $cells = $table.find("td"); var numCells = $cells.length; var numRows = $rows.length; var numCols = numCells / numRows; // skip row headings // track which columns have rowspans by setting to 1 var matrix = new Array(numRows).fill(new Array(numCols).fill(0)); var matrix = new Array(numRows); // init 2d matrix for (var i = 0; i = startRow) { for (var row = startRow; row = endRow; row--) { if (matrix[row][startCol] !== 1) { // rowspan doesn't already exists for this cell var $thisCell = $cells.eq(row * numCols + startCol); $thisCell.addClass('highlight'); lastValidCell = $thisCell[0]; } else { endRow = row + 1; // found a blocking cell return false; } } } } function clearHighlights() { $cells.removeClass('highlight'); } function createCellSpan() { var sRow = Math.min(startRow, endRow); var eRow = Math.max(startRow, endRow); var rowSpan = eRow - sRow + 1; for (var row = eRow; row >= sRow; row--) { var $thisCell = $cells.eq(row * numCols + startCol); if (row === sRow) $thisCell.attr('rowspan', rowSpan).addClass('spanned'); else $thisCell.remove(); matrix[row][startCol] = 1; // mark these cells as blocked } /*for (var row = sRow; row = sRow; row--) { var $thisCell = $cells.eq(row * numCols + startCol); var $thisRow = $('tbody tr').eq(row); if (row === sRow) { $thisCell.attr('rowspan', 0).removeClass('spanned'); console.log("Span Removed."); matrix[row][startCol] = 0; // mark this cell as empty } else { $thisRow.append(''); matrix[row][startCol] = 0; // mark these cells as empty } } } $(document).on("contextmenu", "td", function(e) { e.preventDefault(); if ($(this).hasClass('spanned') === false) { console.log("This cell is not spanned."); return false; } else { removeCellSpan(); } }); } 
 #control-panel p { display: inline; font-size: 14px; } table { font-family: Arvo, Arial, sans-serif; border-collapse: separate !important; border-top: 2px solid #4DC7E8; border-left: 2px solid #4DC7E8; border-radius: 6px; } .days-of-the-week th { width: 160px; padding-top: 10px; padding-bottom: 10px; text-align: center; border-right: 2px solid #4DC7E8; border-bottom: 2px solid #4DC7E8; border-radius: 6px; } tr td, th { border-right: 2px solid #4DC7E8; border-bottom: 2px solid #4DC7E8; border-radius: 6px; } td { height: 50px; } .days-of-the-week .time-col { width: 80px; } tbody th { text-align: right; padding: 5px 3px; } .highlight { background-color: rgba(255, 108, 78, 0.3); } .spanned { background-color: green; } .appt-text { background-color: inherit; border: 0px; width: 100%; height: 100%; outline: none; cursor: default; } 
  

= Add Appointment

Sunday Monday Tuesday Wednesday Thursday Friday Saturday
10:00am
10:30am
11:00am
11:30am
12:00pm
12:30pm
1:00pm
1:30pm
2:00pm
2:30pm
3:00pm
3:30pm
4:00pm
4:30pm
5:00pm
5:30pm
6:00pm
6:30pm
7:00pm
7:30pm
8:00pm
8:30pm
9:00pm
9:30pm
10:00pm

Dovevo includere tutto il mio codice affinché lo snippet funzionasse. Ma illustra perfettamente il problema.

Ho apportato una serie di modifiche. Troppi per i dettagli, ma mi aspetto che tu confronti il ​​prima con il dopo per vedere cosa sono.

Un punto chiave, ho scelto di hide le celle usando display:none , invece di eliminarle. Ciò rende più facile riportarli indietro quando si rimuove il rowspan.

 function addAppt() { $('td').css('cursor', 'cell'); $('textarea').css('cursor', 'cell'); var $table = $("#myTable tbody"); var $rows = $table.children("tr"); var $cells = $table.find("td"); var numCells = $cells.length; var numRows = $rows.length; var numCols = numCells / numRows; // skip row headings // track which columns have rowspans by setting to 1 var matrix = new Array(numRows).fill(new Array(numCols).fill(0)); var matrix = new Array(numRows); // init 2d matrix for (var i = 0; i < numRows; i++) { matrix[i] = new Array(numCols); } //matrix[1][3] = 1; // test blocking cell var startCol, startRow, endRow, lastValidCell; var cellDown, cellOver, cellUp; var mouseDown = false; // used mouse event code from http://stackoverflow.com/a/19164149/1544886 $cells.on('mousedown touchstart', function(event) { var cellPos; if (event.which !== 1) return; // only continue if left mouse button cellDown = this; event.preventDefault(); mouseDown = true; cellPos = findCell(cellDown); if (cellPos) { startCol = cellPos.col; startRow = endRow = cellPos.row; highlightCells(); } else { clearHighlights(); } }); $cells.on('mousemove touchmove', function(event) { event.preventDefault(); if (mouseDown && cellOver != this) { var cellPos; cellOver = this; cellPos = findCell(cellOver); if (cellPos) { // limit to starting column only if (cellPos.col === startCol) { endRow = cellPos.row; highlightCells(); } } } }); $cells.on('mouseup touchend', function(event) { var cellPos; if (event.which !== 1) return; // only continue if left mouse button event.preventDefault(); cellUp = this; cellPos = findCell(cellUp); if (cellPos && cellUp === lastValidCell) { createCellSpan(); } }); $(window.document).on('mouseup touchend', function(event) { mouseDown = false; //cellDown = cellOver = null; clearHighlights(); }); function findCell(cell, ignore) { var col, row; ignore = ignore | true; // set ignore to true if we haven't provided this optional param $cells.each(function(idx, el) { if (cell === el) { col = idx % numCols; row = Math.floor(idx / numCols); if (!ignore && matrix[row][col] === 1) { // a rowspan already exists for this cell //console.log('found', row, col); col = null; } return false; } }); return (col != null) ? { col: col, row: row } : null; } function highlightCells() { clearHighlights(); if (endRow >= startRow) { for (var row = startRow; row < = endRow; row++) { if (matrix[row][startCol] !== 1) { // rowspan doesn't already exists for this cell var $thisCell = $cells.eq(row * numCols + startCol); $thisCell.addClass('highlight'); lastValidCell = $thisCell[0]; } else { endRow = row - 1; // found a blocking cell return false; } } } else { for (var row = startRow; row >= endRow; row--) { if (matrix[row][startCol] !== 1) { // rowspan doesn't already exists for this cell var $thisCell = $cells.eq(row * numCols + startCol); $thisCell.addClass('highlight'); lastValidCell = $thisCell[0]; } else { endRow = row + 1; // found a blocking cell return false; } } } } function clearHighlights() { $cells.removeClass('highlight'); } function createCellSpan() { var sRow = Math.min(startRow, endRow); var eRow = Math.max(startRow, endRow); var rowSpan = eRow - sRow + 1; for (var row = eRow; row >= sRow; row--) { var $thisCell = $cells.eq(row * numCols + startCol); if (row === sRow) $thisCell.attr('rowspan', rowSpan).addClass('spanned'); else $thisCell.css('display','none'); // hide instead of removing //$thisCell.remove(); matrix[row][startCol] = 1; // mark these cells as blocked } /*for (var row = sRow; row < = eRow; row++) { var $thisCell = $cells.eq(row * numCols + startCol); $thisCell.addClass('spanned'); matrix[row][startCol] = 1; // mark these cells as blocked } */ } function removeCellSpan(cell) { var sRow, eRow; var $thisCell = $(cell); var rowSpan = $thisCell.attr('rowspan') - 1; var cellPos = findCell(cell, true); if (cellPos) { startCol = cellPos.col; sRow = cellPos.row; eRow = cellPos.row + rowSpan; var $currentCells = $table.find("td"); // add back missing cells for (var row = sRow; row <= eRow; row++) { if (row === sRow) { var $thisCell = $cells.eq(row * numCols + startCol); $thisCell.attr('rowspan', 1).removeClass('spanned'); } else { var $thisCell = $currentCells.eq(row * numCols + startCol); $thisCell.css('display','table-cell'); } matrix[row][startCol] = 0; // mark this cell as empty } } } $(document).on("contextmenu", "td", function(e) { e.preventDefault(); if ($(this).hasClass('spanned') === false) { console.log("This cell is not spanned."); return false; } else { removeCellSpan(this); } }); } 
 #control-panel p { display: inline; font-size: 14px; } table { font-family: Arvo, Arial, sans-serif; border-collapse: separate !important; border-top: 2px solid #4DC7E8; border-left: 2px solid #4DC7E8; border-radius: 6px; } .days-of-the-week th { width: 160px; padding-top: 10px; padding-bottom: 10px; text-align: center; border-right: 2px solid #4DC7E8; border-bottom: 2px solid #4DC7E8; border-radius: 6px; } tr td, th { border-right: 2px solid #4DC7E8; border-bottom: 2px solid #4DC7E8; border-radius: 6px; } td { height: 50px; } .days-of-the-week .time-col { width: 80px; } tbody th { text-align: right; padding: 5px 3px; } .highlight { background-color: rgba(255, 108, 78, 0.3); } .spanned { background-color: green; } .appt-text { background-color: inherit; border: 0px; width: 100%; height: 100%; outline: none; cursor: default; } 
  

= Add Appointment

Sunday Monday Tuesday Wednesday Thursday Friday Saturday
10:00am
10:30am
11:00am
11:30am
12:00pm
12:30pm
1:00pm
1:30pm
2:00pm
2:30pm
3:00pm
3:30pm
4:00pm
4:30pm
5:00pm
5:30pm
6:00pm
6:30pm
7:00pm
7:30pm
8:00pm
8:30pm
9:00pm
9:30pm
10:00pm