Как исправить выход с помощью rowspan?

Question

Я создаю динамическую таблицу, и я хочу, чтобы отобразить что-то вроде этого:

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 

таблицы, что я получаю выглядит следующим образом:

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 

Вот мой код, который я использую, чтобы получить эта таблица построена выше:

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

Я не уверен, на каком этапе, когда я строю свой код таблицы html, неправильно? Я попытался переключиться и поместить тэг после каждого выхода, но это не помогло решить мою проблему. Если кто-нибудь увидит, что не так в моем коде, пожалуйста, дайте мне знать. Благодарю.

Answer 1

Путь RowSpan работает так, что она будет расширяться вниз из строки, в которой он был создан. В вашем примере вы хотите запустить rowspan, где начинается новая группа дат.

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

Answer 2

Вы должны попробовать:

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