Generated table with rowspan causing extra cells

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

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!

Answer 1

To simplify it for you ..

If you use [rowspan="2"] in cell --> then you have to remove one cell from the next row

Example :

<table id="Table1" >
    <tr>
        <td rowspan="2" style="border-style:solid"></td>
        <td style="border-style:solid"></td>
    </tr>
    <tr>
        <td style="border-style:solid"></td>          
    </tr>
</table>

If you use [ rowspan="3" ] in cell --> then you have to remove one cell from the next two rows

Example :

<table id="Table1" >
    <tr>
        <td rowspan="3" style="border-style:solid"></td>
        <td style="border-style:solid"></td>
    </tr>
    <tr>
        <td style="border-style:solid"></td>          
    </tr>
    <tr>
        <td style="border-style:solid"></td>          
    </tr>
</table>

Answer 2

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.