javascript - 使用 JS 或 JQuery 制作网格

Question

我是 JS 新手，一直在通过 The Odin Project 学习课程。我在我的第一个 JS/JQuery 项目中，我在这个项目中遇到了问题：

如何使用 JS/JQuery 以便用户可以输入 1-16 之间的数字，并且网格会弹出页面的大小。即用户输入 3 和一个 3x3 的网格大小的网页出来？还是用户输入 16 并出现 16x16 网格？

我不希望有一个直接的答案，但也许有人可以用一些入门代码为我指出正确的方向？我猜最好的方法是创建一个 div 并使用 .append() 函数？这里只需要更多的方向。

Answer 1

这是您需要的神秘回复。我已经包括了填空题，并省略了如何扩展表格以填满屏幕。提示：使用 $(window).height()/$(window).width() 来获取屏幕的大小。

$('#grid').change(function(){
    $('table').remove();
    var code = "<table>";
    for (var i = 0; i < $('#grid').val(); i++)
    {
        code += "???";
        for (var j = 0; j < $('#grid').val(); j++)
        {
            code += "???";
        }
        code += "???";
    }
    code += "</table>";
    $('#container').append(code);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <label>Grid Size</label>
    <input type="number" id="grid" />
</div>