动态创建的 html 表格数据未按预期顺序显示

Question

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');
  thh.colSpan = "31";
  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;
  //tbody.appendChild(CreateWeakHeader("Week " + week));

  var tre = document.createElement('tr');

  for (var j = 0; j < data.length; j++) {


    if (j % 7 == 0) {
      week++;
      tbody.appendChild(CreateWeakHeader("Week " + week));





    }
    var thead = document.createElement('td');
    thead.classList.add("ui-droppable");


    thead.appendChild(data[j]);
    tre.appendChild(thead);


    tbody.appendChild(tre);





  }




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


}

$("#tb").click(function() {
  var header = document.createElement("div");
  header.innerHTML = "test";
  var d = [header, header, header, header, header, header, header, header];
  htmlTable(d, days);


});
var days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'];

<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 项时，它需要与另一个 td 分开。 td 显示第 1 周，当我的数据有超过 7 个项目时，它需要再次分开显示第 2 周等。

更新

我现在正在使用我的代码的剪辑版本。 希望有人可以帮助我解决这个问题。 谢谢

Answer 1

代码中发生了一些问题。

1. 在for 循环的每次迭代中都尝试将表格单元格添加到行中，并将行添加到表格中。如果它起作用的话，将会产生很多带有单个单元格的行。
2. 它不起作用，因为只有一个 tre 实例，即行变量。所以这意味着tbody.appendChild(tre); 行什么也没做，因为appendChild 不会追加已经有父元素的元素。
3. 因为您的 data 是对 HTMLElements 与父母的引用数组，因此使用 appendChild 附加它们没有任何作用。

我已经修改了下面的代码来处理所有这些情况。

首先，如果单元格是HTMLElement，代码会将数据的克隆附加到单元格中。我希望在你的真实代码中你不需要这个，但是对于这个例子，为什么不呢？然后它将单元格附加到该行并继续到下一个数据元素。

其次，当数据迭代器位于 7 时，在附加“第 N 周”标头之前，如果该行上有单元格，它会附加该行的克隆。

最后，在附加行的克隆后，代码会将行变量重置为 tr 元素的新实例，没有单元格。

我还对您的代码进行了一些变量名称和格式更改，以便更轻松地使用它。

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');
  thh.colSpan = "6"; // "31"; Why 31? A week has 7 days...
  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;
  //tbody.appendChild(CreateWeakHeader("Week " + week));

  var tre = document.createElement('tr');
  for (var j = 0; j < data.length; j++) {
    if (j % 7 == 0) {
      week++;
      /* Major changes start here */
      // if the row has cells
      if (tre.querySelectorAll('td').length) {
        // clone and append to tbody
        tbody.appendChild(tre.cloneNode(true));
        // reset table row variable
        tre = document.createElement('tr');
      }
      // then append the Week header
      tbody.appendChild(CreateWeakHeader("Week " + week));
    }

    var td = document.createElement('td');
    td.classList.add("ui-droppable");
    // Set the value of the cell to a clone of the data, if it's an HTMLElement
    // Otherwise, make it a text node.
    var value = data[j] instanceof HTMLElement ?
      data[j].cloneNode(true) :
      document.createTextNode(data[j]);
    td.appendChild(value);
    tre.appendChild(td);
  }
  // If the number of data elements is not evenly divisible by 7,
  // the remainder will be on the row variable, but not appended
  // to the tbody, so do that.
  if (tre.querySelectorAll('td').length) {
    tbody.appendChild(tre.cloneNode(true));
  }

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

$("#tb").click(function() {
  var header = document.createElement("div");
  header.innerHTML = "test";
  var d = [header, header, header, header, header, header, header, header];
  htmlTable(d, days);
});
var days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'];

<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>