javascript - While循环: Generated table rows and column inconsistency

Question

请解释一下为什么我借用了别人的代码SO问题产生不一致的结果。该程序接受 2 个输入，即行和列。然后它应该生成一个表，其中包含输入的表行和表列的确切数量。但是，第一行似乎将单元格相乘并减少每一行，直到最后一行实际呈现出其他每一行应有的内容。

此外，我注意到当我将第 25 行移动到内部 while 内部时循环，生成了一个类似于金字塔的表(这很酷)，但我无法解释它在做什么。

$("<tr class='tableRow'>").appendTo('table#container');

话虽如此，请帮助我生成一个表格，当输入相等时，该表格将均匀地呈现行和列。

注意:输入 1 表示行，输入 1 表示列确实会返回预期结果，但这是它“有效”的唯一场景。输入 2 表示行，输入 2 表示列，会产生意想不到的结果。

Sandbox Fiddle

//Table Generator
var c = 10; //parseInt(prompt("Enter column "), 10);
var r = 10; //parseInt(prompt("Enter row "), 10);
var cTmp = c;
var rTmp = r;

function rowLoop() {
  $('tr.tableRow').each(function(index) {
    var trFound = $("tr.tableRow:eq(" + index + ")");
    var rowNum = parseInt(($("tr.tableRow:eq(" + index + ")").index()), 10);
    var tdAdd = "<td>test</td>";
    if ($(this).index() === rowNum) {
      trFound.append(tdAdd);
      console.log("Add a TD");
      console.log(rowNum + "=" + $(this).index());
      console.log(rowNum + "=" + $(this).index());
    } else {
      console.log(rowNum + "<>" + $(this).index());
      console.log(rowNum + "<>" + $(this).index());
    }
  });
}
while (0 < rTmp) {
  cTmp = c;
  $("<tr  class='tableRow'>").appendTo('table#container');
  while (0 < cTmp) {
    rowLoop();
    cTmp--;
  }
  document.getElementById("container").innerHTML = document.getElementById("container").innerHTML + "</tr>";
  rTmp--;
}

table {
  border-collapse: collapse;
  border: solid 1px #ACE;
}
tr {
  height: 15px;
}
td {
  border: solid 1px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table id='container'></table>

Answer 1

为什么不使用一个while循环而不是使用一个简单的嵌套for循环？这将使该任务更容易阅读和理解。

//Table Generator
var cols = 10; //parseInt(prompt("Enter column "), 10);
var rows = 10; //parseInt(prompt("Enter row "), 10);

generateTable('container', rows, cols, 'test');

function generateTable(id, rows, cols, fill) {
  var elTable = document.getElementById(id);
  createRows(elTable, rows, cols, fill);
}

function createRows(elTable, rows, cols, fill) {
  for (var row = 0; row < rows; row++) {    
    elTable.appendChild(createRow(row, cols, fill));
  }
}

function createRow(row, cols, fill) {
  var elRow = document.createElement('tr');
  elRow.className = 'tableRow';
  createCols(elRow, row, cols, fill);
  return elRow;
}

function createCols(elRow, row, cols, fill) {
  for (var col = 0; col < cols; col++) {
    elRow.appendChild(createCol(row, col, fill));
  }
}

function createCol(row, col, fill) {
  var elCol = document.createElement('td');
  elCol.innerHTML = fill || row + 'x' + col;
  return elCol;
}

table {
  border-collapse: collapse;
  border: solid 1px #ACE;
}
tr {
  height: 15px;
}
td {
  border: solid 1px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='container'></table>