如何使用 rowspan 修复输出？

Question

我正在创建动态 table，我想显示如下内容：

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 我得到的是这样的：

  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

这是我用来在上面构建 table 的代码：

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

我不确定我构建 table html 代码的哪一步是错误的？我尝试切换并在每次输出后放置 tr 标签，但这并没有解决我的问题。如果有人看到我的代码有什么问题，请告诉我。谢谢。

Answer 1

你应该试试：

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

Answer 2

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

如何使用 rowspan 修复输出？

How to fix output with rowspan?

javascript

html

html-table

dynamic-tables