javascript - 我想在 jQuery 中创建一个 html 表格布局

Question

我正在尝试使用 jQuery 创建一个 Html 表格布局，但我不知道我在哪里做错了。

当我尝试运行它并检查控制台选项卡时，错误带有未定​​义（i和table2）

我只想在 chrome 页面上显示表格意味着我想要输出。

$(document).ready(function() {
  function table() {
    this.column = col;
  }

  function col(value1, value2) {
    var multiply = (value1 * value2);
    return multiply;
  }
  var table2 = new table();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Table Layout</h1>
<table border="solid 3px" style="font-size: 20px;" width="100%">
  <thead>
    <tr>
      <script>
        for (var j = 1; j <= 10; j++) {
          console.log("<th><label'>" + i + "</label></th>");
        }
      </script>
    </tr>
  </thead>

  <tbody>
    <script>
      for (var i = 1; i <= 5; i++) {
        console.log("<tr>");
        for (var k = 1; k <= 5; k++) {
          var value1 = i;
          var value2 = k;
          console.log("<td>" + table2.column(value1, value2) + "</td>");
        }
        console.log("</tr>");
      }
    </script>
  </tbody>
</table>

标签： javascriptjquery

Answer 1

这应该这样做。
里面有一个 i 但它应该是一个 j

console.log("<th><label'>" + j + "</label></th>");

我在 table2 调用之前复制了你的 jquery 代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Table Layout</h1>
<table border="solid 3px" style="font-size: 20px;" width="100%">
  <thead>
    <tr>
      <script>
        for (var j = 1; j <= 10; j++) {
          console.log("<th><label'>" + j + "</label></th>");
        }

      </script>
    </tr>
  </thead>

  <tbody>
    <script>
      function table() {
        this.column = col;
      }

      function col(value1, value2) {
        var multiply = (value1 * value2);
        return multiply;
      }
      
      var table2 = new table();
      for (var i = 1; i <= 5; i++) {
        console.log("<tr>");
        for (var k = 1; k <= 5; k++) {
          var value1 = i;
          var value2 = k;
          console.log("<td>" + table2.column(value1, value2) + "</td>");
        }
        console.log("</tr>");
      }

    </script>
  </tbody>
</table>