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

Question

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

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

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

标签： javascriptc#asp.netasp.net-mvc

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>