使用jQuery创建HTML表格布局时报i和table2未定义如何解决

问题原因 #

• 作用域错误：table2定义在$(document).ready()的闭包内，全局作用域的内联脚本无法访问，且内联脚本执行时机早于DOM就绪回调，变量还没完成赋值就被调用。
• 变量名错误：thead部分的循环变量声明的是j，实际输出用了未声明的i。
• 渲染逻辑错误：console.log只会输出内容到浏览器控制台，不会把HTML插入到页面DOM中，完全无法渲染表格内容。
• 细节错误：表头列数和表身列数不匹配，标签语法有多余引号的问题。

修复后完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表格布局</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Table Layout</h1>
<table border="3" style="font-size: 20px;" width="100%">
  <thead>
    <tr id="tableHeader"></tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

<script>
function col(value1, value2) {
  return value1 * value2;
}
function Table() {
  this.column = col;
}
var table2 = new Table();

$(document).ready(function() {
  // 渲染表头
  var headerHtml = '';
  for (var j = 1; j <= 5; j++) {
    headerHtml += '<th><label>' + j + '</label></th>';
  }
  $('#tableHeader').html(headerHtml);

  // 渲染表身
  var bodyHtml = '';
  for (var i = 1; i <= 5; i++) {
    bodyHtml += '<tr>';
    for (var k = 1; k <= 5; k++) {
      bodyHtml += '<td>' + table2.column(i, k) + '</td>';
    }
    bodyHtml += '</tr>';
  }
  $('#tableBody').html(bodyHtml);
});
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Faisal Qureshi