javascript - 从 jquery 中的表中删除行跨度

标签 javascript jquery html html-table

这是一个表格，您可以单击该表格并将其向下拖动到行跨度。我添加了函数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 < 5; 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;

    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;

    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) {
    var col, row;

    $cells.each(function(idx, el) {
      if (cell === el) {
        col = idx % numCols;
        row = Math.floor(idx / numCols);
        
        if (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.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() {
    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);
      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('<td><textarea cols="20" rows="5" class="appt-text"></textarea></td>');
        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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="control-panel">
        <button onclick="addAppt()" id="add-appt" title="Add Appointment">+</button>
        <p>= Add Appointment</p>
      </div>
      <div class="row text-center">
        <table id="myTable">
          <thead>
            <tr class="days-of-the-week">
              <th scope="col" class="time-col"></th>
              <th scope="col">Sunday</th>
              <th scope="col">Monday</th>
              <th scope="col">Tuesday</th>
              <th scope="col">Wednesday</th>
              <th scope="col">Thursday</th>
              <th scope="col">Friday</th>
              <th scope="col">Saturday</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row" class="rowHdr">10:00am</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">10:30am</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">11:00am</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">11:30am</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">12:00pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">12:30pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">1:00pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">1:30pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">2:00pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">2:30pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">3:00pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">3:30pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">4:00pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">4:30pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">5:00pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">5:30pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">6:00pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">6:30pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">7:00pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">7:30pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">8:00pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">8:30pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">9:00pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">9:30pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">10:00pm</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
          </tbody>
        </table>
      </div>

我必须包含所有代码才能使代码片段正常工作。但它完美地说明了问题。

最佳答案

我做了一些改变。太多了，无法详细说明，但我希望您能将之前和之后进行比较，看看它们是什么。

一个关键点，我选择使用 display:none 隐藏单元格，而不是删除它们。这使得在删除行跨度时更容易将它们恢复。

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="control-panel">
  <button onclick="addAppt()" id="add-appt" title="Add Appointment">+</button>
  <p>= Add Appointment</p>
</div>
<div class="row text-center">
  <table id="myTable">
    <thead>
      <tr class="days-of-the-week">
        <th scope="col" class="time-col"></th>
        <th scope="col">Sunday</th>
        <th scope="col">Monday</th>
        <th scope="col">Tuesday</th>
        <th scope="col">Wednesday</th>
        <th scope="col">Thursday</th>
        <th scope="col">Friday</th>
        <th scope="col">Saturday</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" class="rowHdr">10:00am</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">10:30am</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">11:00am</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">11:30am</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">12:00pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">12:30pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">1:00pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">1:30pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">2:00pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">2:30pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">3:00pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">3:30pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">4:00pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">4:30pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">5:00pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">5:30pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">6:00pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">6:30pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">7:00pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">7:30pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">8:00pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">8:30pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">9:00pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">9:30pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
      <tr>
        <th scope="row" class="rowHdr">10:00pm</th>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
        <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
      </tr>
    </tbody>
  </table>
</div>

关于javascript - 从 jquery 中的表中删除行跨度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42637153/

上一篇：javascript - jquery处理递归ajax调用，如何告诉浏览器它已经完成

下一篇：javascript - 如何更改 MathJax 配置文件的默认目录？

相关文章：

关于输入和复选框的 PHP 问题

javascript - 如何拦截读取文本输入的值？

javascript - typescript :从异步函数为变量赋值

javascript - 使用ES6 Class语法，如何实现其他文件中的类方法？

javascript - 从 React 组件中获取值(value)

jquery - 幻灯片按钮

jquery - 基本水平菜单在 iPad 上不起作用

javascript - 无法向 li 添加文本输入

javascript - 使用输入按钮创建动态表单

jquery - 如何在不使用 html 的情况下将元素包含在 div 中？

©2024 IT工具网  联系我们