Question

我正在尝试创建一个表格，该表格将显示在第一行和第二行以及第一列上。第一行将具有相同的名称，工作正常。但是使用我的下面的脚本，行标题（从第3行开始）显示在最后一列而不是第一列。

请告知我哪里出错了。

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/

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

Answer 2

你错过了创建tbody中的if语句

 for (var c = 0; c <= colsInYard; c++) {
       var cell = document.createElement("td");
       if (c=== 0)
       cell.appendChild(cellText);

       row.appendChild(cell);
 }

https://jsfiddle.net/udopgxLv/3/

Javascript：在第一行的第一行和行标题上创建一个包含列标题的动态表

2 个答案: