Javascript 加入表格单元格 ASP.NET MVC

Question

我们正在开发一个网站，该网站有一个显示日程的页面，其中包含不同的日程项目，所有这些项目都有特定的价值，它们都是原创/独特的。我们生成此计划的方式使我无法使用 rowspan 或 colspan。我想出了使用 javascript 的想法，这是一种客户端语言，可以在服务器完成吐出表格时重做表格的某些部分。问题是我对javascript不太了解，在下面的2张图片中，我无法解释我想要完成的工作

左边的第一列是每节课的一列以及持续多长时间。每节课持续 3 小时，如黑色轮廓所示。我想用 javascript 创建一个系统，该系统检测同一列中的 3 个课程何时具有相同的类代码（我在本例中隐藏）和相同的房间，并将它们作为一个数据块连接在一起。因此，不要用相同的班级和房间填充每个，而是用显示班级和房间的 1 个块填充这 3 个单元格。

如果可能的话，我希望得到一些关于这个想法的反馈。

Answer 1

根据我从您那里了解到的情况。生成表格时不能使用行跨度，但之后可以使用它。所以，我写了下面的代码。如果您需要澄清，请告诉我，但代码非常具有自我探索性。

基本上，我们循环遍历您想要的列的值，并根据下一行中的下一个值检查它，然后根据该循环计算行跨度，然后删除额外的单元格

不要忘记将columnToMergeNumber = [2, 3]; 的值更改为表格的列号

var columnToMergeNumber = [2, 3];
$(document).ready(function() {
  columnToMergeNumber.sort(function(a, b) {
    return b - a;
  });
  calcmergeCells();
});

// sloop through rows and cells to get current value and value of row span
function calcmergeCells() {
  var numberOfRows = $("#MergeTable").find("tr").length + 1;
  for (var j = 0; j < columnToMergeNumber.length; j++) {
    for (var i = 1; i < numberOfRows; i++) {
      var currentValue = $("#MergeTable tr:nth-child(" + i + ")")
        .find("td:nth-child(" + columnToMergeNumber[j] + ")")
        .html();
      var times = mergeNTimes(currentValue, 1, i, columnToMergeNumber[j]);
      mergeCells(i, times, columnToMergeNumber[j]);
      i += times - 1;
    }
  }
}
// Find out the value of rpowspan
function mergeNTimes(currentValue, times, index, column) {
  var nextValue = $("#MergeTable tr:nth-child(" + (index + 1) + ")")
    .find("td:nth-child(" + column + ")")
    .html();
  if (nextValue == currentValue) {
    return mergeNTimes(currentValue, times + 1, index + 1, column);
  } else {
    return times;
  }
}

// Delete cells and add rowspan
function mergeCells(fromRow, times, column) {
  for (var i = fromRow + 1; i < fromRow + times; i++) {
    $("#MergeTable tr:nth-child(" + i + ")")
      .find("td:nth-child(" + column + ")")
      .remove();
  }

  $("#MergeTable tr:nth-child(" + fromRow + ")")
    .find("td:nth-child(" + column + ")")
    .attr("rowspan", times);
}

table {
  border-collapse: collapse;
}

table td {
  border: 1px solid black;
  min-width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="MergeTable">
  <tr>
    <td>1</td>
    <td>a</td>
    <td>c</td>
  </tr>
  <tr>
    <td>2</td>
    <td>a</td>
    <td>d</td>
  </tr>
  <tr>
    <td>3</td>
    <td>a</td>
    <td>c</td>
  </tr>
  <tr>
    <td>4</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>5</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>