带有行跨度的生成表导致多余的单元格 [英] Generated table with rowspan causing extra cells

问题描述

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 :(
        }
    }
}

在此JSBin 中，您会看到多余的单元格卡在了右侧我的行由于rowspan被添加到以上行中的单元格中.我试图弄清楚如何删除这些.任何建议表示赞赏！

解决方案

即使我不知道您要什么，也不知道为什么， 1的单元格."x"指定需要删除的多余单元格，而-"表示打算为空白的空白.

这是表中的起始数据:

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

如果您开始从左下角到右上角删除，就会发生这种情况.删除倒数第二行中与约会相关的多余单元格后，最后一行只有三个单元格.因此，当您从下一个约会向下遍历以删除该行中的第四个单元格时，会出现错误.

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

如果您尝试从右上方到左下方删除，则当您删除第二个约会时，您最终会错误地删除另一个约会(两个"a"相邻堆积).

a-a-
-xa
axx
-x-x

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

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 :(
        }
    }
}

In this JSBin, you can see the extra cells which get stuck on the right side of my rows due to rowspan being added to cells in the rows above. I'm trying to figure out how to remove these. Any suggestions are appreciated!

解决方案

Even though I don't know what you want, or have any idea why, I wrote some jQuery to remove the extra columns, because that's what we do here on StackOverflow.

I make no guarantees as to the efficiency or actual usefulness of this code.

$(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();
      }
    });
  });
});

Edit: Apparently you just need to give the rows a height to avoid that collapsing into each other behavior:

tr { height: 30px; }

Edit 2: I did update my jQuery to hide the cells immediately below a cell with a rowspan. It looks like you have conflicting appointments in your example. Joking aside, you probably want to deal with making sure there are no scheduling conflicts and not writing those extra cells in the first place.

A general strategy to deal with this ahead of time would be to initialize a multidimensional array of booleans (say cellsUsed) the same size as your table to false, then when printing a cell with having a rowspan, mark the rowspan - 1 array locations as true. Then when it's time to write a cell which corresponds to an array index set to true, you just don't output anything. If there happens to be an actual appointment defined in a cell you marked not to output, you have an entirely different problem, and have to deal with that.

EDIT: Here's a demonstration of why you have to hide the extra cells or go over the table twice to remove them in order to avoid errors:

Here's an example table where 'a' is a cell having rowspan > 1. an 'x' specifies the extra cells which need to be deleted, and a '-' signifies a blank which is intended to be blank.

This is the starting data in the table:

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

This is what happens if you start deleting from bottom left to top-right. After you delete the extra cell connected to the appointment in the second-to-last row you only have three cells in the last row. So when you traverse downward from the next appointment to delete fourth cell in that row, you get an error.

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

If you try to delete from top-right to bottom left, when you go to delete the second appointment you end up erroneously deleting another appointment (The two 'a' stacked adjacently).

a-a-
-xa
axx
-x-x

The only way to avoid problems deleting the cells after generating the table is to mark all the cells you want deleted, then delete the cells in each row from right to left.

这篇关于带有行跨度的生成表导致多余的单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！