javascript - 需要有关 HTML/JS 方法的帮助，从哪里开始构建稍后动态的 10x10 乘法表

Question

我在这里查看了有关这些“简单”乘法表的其他问题。我提出了一个更基本的问题，我需要了解当我编写 JavaScript 并将其与 HTML 合并时它是如何工作的(这就是我感到困惑的地方。)

因此，在乘法练习中，我创建了一个 <div> HTML 中的框，所以我的问题是:我是否在 HTML 正文中创建 10x10 矩阵(行/列和数字)，然后使用 Javascript？或者我首先在我的 script.js 中创建行/列和数字带有 HTML 标记，可以动态运行表格，行数和列数最多为 10？

我刚刚开始学习Javascript，这是我经常遇到的问题。我如何构建语法，接下来是什么以及我是否应该将 HTML 放入脚本中或将其构建在带有类/id 等的 HTML 文件中。

解释这一点的新手链接非常棒!

Answer 1

实际上这两种方法都在生产中使用。 HTML 只是您的标记，它可以是静态的，也可以使用 JS 动态创建，但数据在大多数情况下是动态的。

现在，

1. 当您第一次加载表格时，例如在页面加载时，您可以从服务器发送静态 html 表格，然后循环遍历每个表格行以填充数据，或者您可以从 JS 执行相同的操作。

(是的，如果您知道自己在做什么以及为什么这样做，那么将 html 放入脚本中是完全正常的。)

当您只是通过 ajax 调用更新表中的值时，您只会循环遍历表(从第 1 点开始就已经存在)行并填充它们。

查看此js fiddle使用js动态创建html表

HTML

<table id="myTable"></table>

JS

function buildTable () {
    var htm = '';
    //the row counter loop
    for (var i=1; i<=10; i++) {
        htm += '<tr>';

        //the columns in each row
        for(var j=1; j<=10; j++) {
        htm += '<td> Row=' + i + ' Column=' + j + ' </td>'; 
        }
        htm += '</tr>';
    }

    //add the rows inside the table
    document.getElementById('myTable').innerHTML = htm;
}

document.onready = buildTable();

如果您想了解其他信息，请在评论中提及，我会相应更新我的答案。

谢谢。

**************** 编辑/说明 ********************

我的buildTable函数与您的init函数相同。

现在，您的代码将不会给出所需的结果，因为在您的代码中您分别使用了 2 个 for 循环。您首先需要了解编码和逻辑的基础知识以及如何使用 for 循环。

我的方法很简单，采用字符串变量 var htm = '';

现在开始向其中添加 HTML。

第一个 for 循环将使行 (<tr>)在表中，第二个嵌套 for 循环将创建列 (<td>)在每一行中。它将继续附加到字符串变量htm

当所有的 for 循环完成后，我们将得到 htm包含需要放入其中的所有 HTML 的变量以及

所以我们将 htm 内容放入表格的innerHTML中，

document.getElementById('myTable').innerHTML = htm;

现在告诉我哪一部分是你不明白的？

您似乎才刚刚开始接触编码和逻辑。您首先需要练习一些 HTML 和 JavaScript 的基础知识，然后这些都会很容易实现。