How to fix output with rowspan?

Question

I'm creating dynamic table and I want to display something like this:

Date               Time
               7:00 AM - 7:15 AM
               7:15 AM - 7:30 AM
03/16/2016     7:30 AM - 7:45 AM
               7:45 AM - 8:00 AM
               8:00 AM - 8:15 AM  

  Date               Time
               7:00 AM - 7:15 AM
               7:15 AM - 7:30 AM
05/05/2016     7:30 AM - 7:45 AM
               7:45 AM - 8:00 AM
               8:00 AM - 8:15 AM

Table that I'm getting looks like this:

  Date               Time

               7:15 AM - 7:30 AM
03/16/2016     7:30 AM - 7:45 AM
               7:45 AM - 8:00 AM
                   05/05/2016     7:00 AM - 7:15 AM
                                  7:15 AM - 7:30 AM
                                  7:30 AM - 7:45 AM
                                  7:45 AM - 8:00 AM
                                  8:00 AM - 8:15 AM

Here is my code that I use to get this table built above:

function buildTbl(){
   var tbl = "<table><thead><tr><th>Date</th><th>Time</th></tr></thead>";
   tbl += "<tbody>";
   var count = 0;
   for (var i = 0; i < dates.length; i++) {
        var entries = groupedByDate[dates[i]];
        tbl+= "<tr><td rowspan='"+count+"'>"+dates[i]+"</td>";
        for (var j = 0; j < entries.length; j++) {
            tbl+="<td>"+entries[j].Slot_Label+"</td></tr>";
            count++;
        }
    }

    tbl += "</tbody></table>";
    $('#myTable').html(tbl);
}

I'm not sure in which step where I'm building my table html code is wrong? I tried to switch around and put tr tag after each output but that did not fix my problem. If anyone see what is wrong in my code please let me know. Thanks.

Please post a [mcve] in your question. – j08691 Apr 06 '16 at 15:17 — j08691, Apr 06 '16 at 15:17

chriswirz · Accepted Answer · 2016-04-06T15:43:13.600

1

The way rowspan works is that it will expand down from the row in which it is created. In your example, you want to start the rowspan where a new date group is started.

function buildTbl(){
   var tbl = "<table><thead><tr><th>Date</th><th>Time</th></tr></thead>";
   tbl += "<tbody>";
   for (var i = 0; i < dates.length; i++) {
        var entries = groupedByDate[dates[i]];
        var count = 0;
        for (var j in entries) {
            count++;
        }
        tbl+= "<tr>";
        tbl+= "<td rowspan='"+count+"' valign='middle'>"+dates[i]+"</td>";
        for (var j = 0; j < entries.length; j++) {
            if (j>0) {
                tbl+= "<tr>";               
            }
            tbl+="<td>"+entries[j].Slot_Label+"</td>";
            tbl+= "</tr>";      
            count++;
        }
    }

    tbl += "</tbody></table>";
    $('#myTable').html(tbl);
}

edited Apr 06 '16 at 15:43

answered Apr 06 '16 at 15:28

chriswirz

278
1
9

I tried this code and everything looks good but one detail, Date values are outputted on the top with first entries value, how Date values can be placed to stand on the middle not on the top? Thanks for your help! – espresso_coffee Apr 06 '16 at 15:41
1

Add valign='middle' such that the line reads `tbl+= ""+dates[i]+"";` – chriswirz Apr 06 '16 at 15:43
I used vertical-align: middle; and that works fine. Thanks for your help one more time. – espresso_coffee Apr 06 '16 at 16:35

score 0 · Answer 2 · answered Apr 06 '16 at 15:24

0

You should try :

tbl += "<tr><td rowspan='" + entries.length + "'>" + dates[i] + "</td>";

answered Apr 06 '16 at 15:24

Lulylulu

1,254
8
17

How to fix output with rowspan?

2 Answers2