c# - 生成的表与 rowspan 导致额外的单元格

Question

HTML

<table id="tableAppointment" bgcolor="#fcfcfc" border="1" cellspacing="1" width="100%">
 <thead>
  <tr>
   <td class="csstextheader" width="70px"></td>
   <td class="csstextheader" width="70px"><b>Time Slot&nbsp;</b></td>
   <td><b>Room 7</b></td>
   <td><b>Room 8</b></td>
   <td><b>Room 9</b></td>
   <td><b>Room 10</b></td>
  </tr>
 </thead>
 <tbody>
  <tr class="csstablelisttd">
   <td width="70px">08:00AM</td>
   <td>00</td>
   <td class="csstdred">John</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
 </table> 

C#

private void GenerateTable() {
    for(int i = 0; i < tableAppointment.Rows.Count; i++) {
        foreach(DataRow dr in dataTableAcqModality.Rows) {
            cell = new HtmlTableCell() {
                InnerHtml = "&nbsp;"
            };
            cell.Style.Add("word-wrap", "break-word");
            cell.Attributes.Remove("class");
            cell.Attributes.Remove("rowspan");
            cell.Style.Remove("display");

            tableAppointment.Rows[i].Cells.Add(cell);
            tableAppointment.Style.Add("table-layout", "fixed");

            if(i == 0) {
                cell.Attributes.Add("ID", RoomID.ToString());
                cell.InnerHtml = String.Format(
                    "<span id='{0}'>{1}</span>",
                    RoomID, Roomname
                );
                tableAppointment.Rows[0].Attributes.Add("class", "csstextheader");
            }
        }
    }
}

protected void Page_Load(object sender, EventArgs e) {
    for(int i = 0; i < tableAppointment.Rows.Count; i++) {
        for(int j = 0; j < tableAppointment.Rows[i].Cells.Count; j++) {
            // This is where I need to remove the extra cells added 
            // after providing rowspan :(
        }
    }
}

在this JSBin ，您可以看到由于 rowspan 被添加到上方行中的单元格而卡在我行右侧的额外单元格。我想弄清楚如何删除这些。任何建议表示赞赏!

Answer 1

即使我不知道你想要什么，也不知道为什么，I wrote some jQuery删除多余的列，因为这就是我们在 StackOverflow 上所做的。

我不保证此代码的效率或实际有用性。

$(document).ready(function() {
  $('table tr').each(function(i, v) {
    var cols = $(this).find('td');
    $(this).find('td[rowspan]').each(function() {
      var idx = $(this).index();
      console.log(idx);
      for(var j = 1; j < $(this).prop('rowspan'); j++) {
        $('table tr').eq(i+j).find('td').eq(idx).hide();
      }
    });
  });
});

编辑:显然你只需要给行一个高度来避免折叠成彼此的行为:

tr { height: 30px; }

编辑 2:我确实更新了我的 jQuery，以隐藏紧靠在具有 rowspan 的单元格下方的单元格。看起来您的示例中有冲突的约会。开个玩笑，您可能想要确保没有调度冲突，而不是首先编写那些额外的单元格。

提前处理此问题的一般策略是将与表大小相同的多维 bool 数组(例如 cellsUsed)初始化为 false，然后在打印具有rowspan，将 rowspan - 1 数组位置标记为 true。然后，当需要写入对应于设置为 true 的数组索引的单元格时，您只是不输出任何内容。如果碰巧在您标记为不输出的单元格中定义了一个实际约会，您就会遇到一个完全不同的问题，并且必须处理它。

编辑:这里演示了为什么您必须隐藏额外的单元格或遍历表格两次以删除它们以避免错误:

这是一个示例表，其中“a”是行跨度 > 1 的单元格。“x”指定需要删除的额外单元格，而“-”表示本应为空白的空白。

这是表中的起始数据:

a-a-
x-xa
xaxx
-x-x

如果您从左下角到右上角开始删除，就会发生这种情况。删除倒数第二行中连接到约会的额外单元格后，最后一行中只有三个单元格。因此，当您从下一个约会向下遍历以删除该行中的第四个单元格时，您会收到错误消息。

a-a-
x-xa
xaxx
--x!

如果您尝试从右上角到左下角删除，当您要删除第二个约会时，您最终会错误地删除另一个约会(两个“a”相邻堆叠)。

a-a-
-xa
axx
-x-x

避免在生成表格后删除单元格出现问题的唯一方法是标记所有要删除的单元格，然后从右到左删除每一行中的单元格。