Question

我正在尝试使用固定标题和第一列创建日程安排日历。带有日期的标题用于在x轴上滚动日历，而在沿y轴滚动时保持在同一点。带有员工姓名的第一列用于沿y轴滚动，同时保持x轴滚动的位置。

功能就在那里，但我们遇到了格式化问题。表格首次加载时的图片如下：。正如你所看到的，Anakin超过了日期标题。在该位置应该是标题的第一个单元格，表示＆＃34;员工姓名＆＃34;。然后，当我滚动任何距离时，表格跳转到：。我真的希望有人知道我的格式错误。我将在下面包含代码和JSFiddle的简化代码链接：

JSFiddle：https://jsfiddle.net/kfhmtz8q/7/#&togetherjs=w0un3meHCa

CSS：

/* CSS for div created table */
.dTable {
  display: table;
  table-layout: fixed;
  position: relative;
  width: auto;
  border-style: solid;
  background: white;
}

.dTableRow {
  display: table-row;
  border-style: solid;
}

.dTableEmps {
  position: relative;
  display: block;
  overflow: hidden;
  border-style: solid;
  z-index: 1;
  min-width: 140px;
  max-width: 140px;
  height: 40px;
  border: 1px solid #999999;
  white-space: nowrap;
}

.dFirstCell {
  position: absolute;
  display: block;
  border-style: solid;
  z-index: 1;
  min-width: 140px;
  max-width: 140px;
  height: 40px;
  border: 1px solid #999999;
  white-space: nowrap;
}

.dTableCell, .dTableDates {
    display: table-cell;
    min-width: 140px;
    max-width: 140px;
    height: 40px;
    border: 1px solid #999999;
    white-space: nowrap;
    overflow: hidden;
}

.dTableHeader {
  position: absolute;
  display: block;
  overflow: hidden;
  border-style: solid;
  z-index: 1;
}

JavaScript的：

/* Create the first row to hold the dates */
                     divRowHead = document.createElement("div");
                     divRowHead.id = "Date Row";
                     divRowHead.setAttribute("class", "dTableHeader");
                     document.getElementById("mainDiv").appendChild(divRowHead);
                         divHead = document.createElement("div");
                         divHead.setAttribute("class", "dTableDates")
                         divHead.innerHTML += "Employee Name";
                         document.getElementById("Date Row").appendChild(divHead);

                     /* Add date divs to the header */
                     for(let i = startDate; i <= endDate + 1; i++) {
                       numStr = (i.toString()).substr(4,2);
               numStrDay = (i.toString()).substr(6,2);
               if(numStr == '09' || numStr == '04' || numStr == '06' || numStr == '11') {
                if(numStrDay == '31') {
                    i += 69;
                }
                else {
                                    divHead = document.createElement("div");
                    finalDay = i.toString()
                    finalDayF = (finalDay.substr(0,4)) + "-" + (finalDay.substr(4,2)) + "-" + (finalDay.substr(6,2));
                                    divHead.setAttribute("class", "dTableDates days")
                                    divHead.id = x + '-' + y;endDate
                    divHead.innerHTML += finalDayF;
                    colCount++;
                }
              }
              else if(numStr == '01' || numStr == '03' || numStr == '05' || numStr == '07' || numStr == '08' || numStr == '10' || numStr == '12') {
                if(numStrDay == '32') {
                    i += 68;
                }
                else {
                                    divHead = document.createElement("div");
                    finalDay = i.toString()
                    finalDayF = (finalDay.substr(0,4)) + "-" + (finalDay.substr(4,2)) + "-" + (finalDay.substr(6,2));
                                    divHead.setAttribute("class", "dTableDates days")
                                    divHead.id = x + '-' + y;
                    divHead.innerHTML += finalDayF;
                    colCount++;
                }
              }
              else if(numStr == '02') {
                if(numStrDay == '29') {
                    i += 71;
                }
                else {
                                    divHead = document.createElement("div");
                    finalDay = i.toString()
                    finalDayF = (finalDay.substr(0,4)) + "-" + (finalDay.substr(4,2)) + "-" + (finalDay.substr(6,2));
                                    divHead.setAttribute("class", "dTableDates days")
                                    divHead.id = x + '-' + y;
                    divHead.innerHTML += finalDayF;
                    colCount++;
                }
              }
                x++;
                                document.getElementById("Date Row").appendChild(divHead);
                            }

                     /* Create the overall div container for the calendar */
                     overDiv = document.createElement("div");
                     overDiv.id = "Overall Table"
                     overDiv.setAttribute("class", "dTable");
                     document.getElementById("mainDiv").appendChild(overDiv);

                     /* Create the following rows with the employee names and empty cells for tasks */
                         divFirstCol = document.createElement("div");
                         divFirstCol.setAttribute("class", "divFirstCol");
                         divFirstCol.id = "Employee Column";
                         document.getElementById("mainDiv").appendChild(divFirstCol);
                     for(var key in localStorage) {
                       divRow = document.createElement("div");
                             typeofKey = (typeof localStorage[key]);
               if(typeofKey == 'string' || typeofKey instanceof String ) {
                 employee = JSON.parse(localStorage.getItem(key));
                                 divRow.setAttribute("class", "dTableRow");
                                 divRow.id = "emp" + x + '-' + y;
                                 document.getElementById("Overall Table").appendChild(divRow);
                                 divCell = document.createElement("div");
                                 divCell.setAttribute("class", "dTableEmps employ");
                                 divCell.innerHTML += employee["Employee Name"];
                                 document.getElementById("emp" + x + '-' + y).appendChild(divCell);

                 for (let j = 0; j < colCount; j++) {
                                     divCell = document.createElement("div");
                                     divCell.setAttribute("class", "dTableCell");
                                     divCell.id = z + '-' + y;
                                     document.getElementById("emp" + x + '-' + y).appendChild(divCell);
                   z++;
                 }
                 z=1;
                 x=0;
                 y++;
                }
                          }
                            var noRows = 19 - localStorage.length;

                            for(; noRows >= 0; noRows--){
                                 divRow = document.createElement("div");
                                 divRow.setAttribute("class", "dTableRow");
                                 divRow.id = "emp" + x + '-' + y;
                                 document.getElementById("Overall Table").appendChild(divRow);
                                 divCell = document.createElement("div");
                                 divCell.setAttribute("class", "dTableEmps employ");
                                 document.getElementById("emp" + x + '-' + y).appendChild(divCell);

                                    for (let l = 0; l < colCount; l++) {
                                         divCell = document.createElement("div");
                                         divCell = document.createElement("div");
                                         divCell.setAttribute("class", "dTableCell");
                                         divCell.id = z + '-' + y;
                                         document.getElementById("emp" + x + '-' + y).appendChild(divCell);
                                         z++;
                                    }
                                    y++;
                            }

使用固定标题和div表HTML的第一列格式化

0 个答案: