动态创建HTML表格数据未按预期顺序排列及按周分隔问题求助

修复后的代码 #

你的代码核心问题有三个：

• 周分隔行的colspan硬编码为31，和实际列数7不匹配，会导致列错位
• 数据行只在循环外创建了一次，所有数据都会被塞进同一行
• 每次插入单元格都重复把当前行追加到tbody，导致行重复渲染

下面是修复后的完整代码：

JavaScript 代码

function CreateWeakHeader(name) {
  var tr = document.createElement('tr');
  var td = document.createElement('td');
  td.classList.add("cal-usersheader");
  td.style.color = "#000";
  td.style.backgroundColor = "#7FFF00";
  td.style.padding = "0px";
  td.appendChild(document.createTextNode(name));
  tr.appendChild(td);

  var thh = document.createElement('td');
  // 修改colspan为实际列数7，和周一到周日的列数匹配
  thh.colSpan = "7";
  thh.style.color = "#FFFFFF";
  thh.style.backgroundColor = "#7FFF00";
  tr.appendChild(thh);
  return tr;
}

function htmlTable(data, columns) {
  var header = document.createElement("div");
  header.classList.add("table-responsive");

  var header2 = document.createElement("div");
  header2.id = "calplaceholder";
  header.appendChild(header2);

  var header3 = document.createElement("div");
  header3.classList.add("cal-sectionDiv");
  header2.appendChild(header3);

  if ((!columns) || columns.length == 0) {
    columns = Object.keys(data[0]);
  }

  var tbe = document.createElement('table');
  tbe.classList.add("table", "table-striped", "table-bordered");
  var thead = document.createElement('thead');
  thead.classList.add("cal-thead");
  tbe.appendChild(thead);

  var tre = document.createElement('tr');
  for (var i = 0; i < columns.length; i++) {
    var the = document.createElement('th');
    the.classList.add("cal-toprow");
    the.textContent = columns[i];
    tre.appendChild(the);
  }
  thead.appendChild(tre);

  var tbody = document.createElement('tbody');
  tbody.classList.add("cal-tbody");
  tbe.appendChild(tbody);
  var week = 0;
  // 声明数据行变量，不要在外面提前创建
  let currentDataRow;

  for (var j = 0; j < data.length; j++) {
    if (j % 7 == 0) {
      week++;
      // 先插入周分隔头
      tbody.appendChild(CreateWeakHeader("Week " + week));
      // 新的一周创建新的数据行
      currentDataRow = document.createElement('tr');
    }
    var cell = document.createElement('td');
    cell.classList.add("ui-droppable");
    cell.appendChild(data[j]);
    currentDataRow.appendChild(cell);
    // 每填满7个单元格，或者到数据最后一位，就把当前行加入tbody
    if (j %7 ==6 || j == data.length -1) {
      tbody.appendChild(currentDataRow);
    }
  }

  header3.appendChild(tbe);
  document.body.appendChild(header);
}

$("#tb").click(function() {
  // 每次创建新的测试节点，避免同一个DOM节点被重复追加导致内容丢失
  var d = Array.from({length:16}, ()=>{
    let div = document.createElement("div");
    div.innerHTML = "test";
    return div;
  });
  htmlTable(d, days);
});
var days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'];

HTML 代码

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="tb">CreateTable</button>

功能说明 #

修改后可以实现：每7条数据对应一周，每一周前自动插入带Week N的分隔行，数据依次填充到周一到周日对应的列中，超过7条自动拆分到下一周的行。

内容的提问来源于stack exchange，提问作者Codiq