从jquery中的表中删除rowspan
这是一个表，您可以单击并向下拖动到rowspan。 我添加了函数removeCellSpan（）以将跨区单元格还原为其默认值。 对于$ thisCell，它可以成功地将rowspan设置为0，并将td元素追加到跨越的相应行。 问题是这些新附加的元素无法被表的其余部分识别，因此无法突出显示。 似乎所有的列都被1偏移了。我错过了什么？
编辑：片段很长，但它完美地说明了问题。 单击“+”按钮在计划中添加约会，右键单击以删除约会。 当您尝试在同一部分中再次安排相同的约会时，会出现问题。
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(' #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
我必须包含我的所有代码才能使代码段工作。 但它完美地说明了这个问题。
我做了很多改变。 细节太多了，但我希望你能比较之前和之后看看它们是什么。
一个关键点，我选择使用display:none隐藏单元格，而不是删除它们。 这样可以在删除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