Javascript 连接表格单元格 ASP.NET MVC

Question

我们正在开发一个网站，该网站有一个页面显示时间表，其中包含不同的时间表项目，所有这些项目都具有特定的值(value)，并且它们都是原创/唯一的。我们生成此计划的方式使得我无法使用 rowspan 或 colspan。我想出了使用 javascript(一种客户端语言)的想法，当服务器完成吐出表格时重做表格的部分内容。问题是我不太了解 javascript ，在下面的两张图片中，我将解释我想要完成的任务

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

我希望得到一些关于这个想法的反馈以及它是否可行。

Answer 1

据我从你那里了解到的。生成表时不能使用 rowspan，但可以在生成表后使用。所以，我写了下面的代码。如果您需要澄清，请告诉我，但代码是非常 self 探索的。

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

Dont forget to change value of columnToMergeNumber = [2, 3]; to the column numbers of your table

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>