如何使用rowspan修复输出

How to fix output with rowspan?

本文关键字：输出 rowspan 何使用      更新时间：2024-01-24

我正在创建动态表，我想显示这样的内容：

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代码是错误的？我试着切换并在每个输出后加上tr标签，但这并没有解决我的问题。如果有人看到我的代码有什么问题，请告诉我。谢谢

行span的工作方式是，它将从创建它的行向下展开。在您的示例中，您希望从开始新日期组的行开始。

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

您应该尝试：

tbl += "<tr><td rowspan='" + entries.length + "'>" + dates[i] + "</td>";
相关文章：