JavaScript : Creating a dynamic table with column title on the first row and row title in the first column

Question

我正在尝试创建一个表格，其标题显示在第一行、第二行和第一列上。第一行将具有相同的名称，工作正常。但在我的下面的脚本中，行标题(从第三行开始)显示在最后一列而不是第一列中。

请告诉我哪里出了问题。

var body = document.getElementsByTagName("body")[0];
var yardName = "B1";
var colsInYard = 5;
var rowsInYard = 5;
var tbl = document.createElement("table");
tbl.setAttribute("id", "our_table");
var tblHead = document.createElement("thead");
for (var r = 0; r < 1; r++) {
  // creates a table row
  var row = document.createElement("tr");
  for (var c = 0; c <= colsInYard; c++) {
    var cell = document.createElement("td");
    if (c != 0) {
      var cellText = document.createTextNode(yardName);
      cell.appendChild(cellText);
      row.appendChild(cell);
    } else {
      var cellText = document.createTextNode(" ");
      cell.appendChild(cellText);
      row.appendChild(cell);
    }
  }
  tblHead.appendChild(row);
}
for (var r = 0; r < 1; r++) {
  var row = document.createElement("tr");
  for (var c = 0; c <= colsInYard; c++) {
    var cell = document.createElement("td");
    if (c != 0) {
      var cellText = document.createTextNode(c);
      cell.appendChild(cellText);
      row.appendChild(cell);
    } else {
      var cellText = document.createTextNode(" ");
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

  }
  tblHead.appendChild(row);
}
tbl.appendChild(tblHead);
var tblBody = document.createElement("tbody");
for (var r = 1; r <= rowsInYard; r++) {
  var row = document.createElement("tr");
  var cellText = document.createTextNode(r);
  for (var c = 0; c <= colsInYard; c++) {
    var cell = document.createElement("td");
    cell.appendChild(cellText);

    row.appendChild(cell);
  }
  tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
body.appendChild(tbl);
tbl.setAttribute("border", "0");
tbl.setAttribute("cellpadding", "0");
tbl.setAttribute("cellspacing", "0");

我的 fiddle https://jsfiddle.net/udopgxLv/1/

Answer 1

我相信您只需要在 tbody 部分的代码中添加一个 IF 语句即可将数据发布到第一列中。我用下面的代码修改了你的 jfiddle (仅添加了 2 行)并且值已正确插入。

            for (var r = 1; r <= rowsInYard; r++) {
              var row = document.createElement("tr");
              var cellText = document.createTextNode(r);
              for (var c = 0; c <= colsInYard; c++) {
                var cell = document.createElement("td");
                if (c==1){                        // <--- this was added 
                    cell.appendChild(cellText);
                 }                              // <--- this was also added

                row.appendChild(cell);
              }
              tblBody.appendChild(row);
            }