javascript - Javascript：创建一个动态表，第一行的列标题和第一列的行标题

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

我的小提琴https://jsfiddle.net/udopgxLv/1/

标签： javascripthtml

Answer 1

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

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