javascript - 如何通过 JavaScript 中的按钮用随机数填充表格单元格

Question

[用户可以输入行数和列数，然后在单击回车按钮后出现棋盘。][问题是我无法使用“填充”按钮用随机数填充表格单元格]

到目前为止JavaScript的代码是

    var a, b, tableElem, rowElem, colElem;
function createTable() {

    a = document.getElementById('row').value;
    b = document.getElementById('column').value;

    if (a == "" || b == "") {
        alert("Enter a number");
    } else {
        tableElem = document.createElement('table');

        for (var i = 0; i < a; i++) {
            rowElem = document.createElement('tr');

            for (var j = 0; j < b; j++) {
                colElem = document.createElement('td');
                rowElem.appendChild(colElem);
                if (i % 2 == j % 2) {
                    colElem.className = "white";
                } else {
                    colElem.className = "black";
                }
            }

            tableElem.appendChild(rowElem);
        }

        document.body.appendChild(tableElem);
    }
}

Html 是

<div class="form-inline">
<div class="form-group">
    <input type="text" class="form-control" id="row" placeholder="Row">
</div>
<div class="form-group">
    <input type="text" class="form-control" id="column" placeholder="Column">
</div>
<button type="button" class="btn btn-primary" onclick="createTable()">
    Enter
</button>

<button onclick="fillTable()" id="btn" type="button" class="btn btn-info">
Fill

我用的是jQuery

$(document).ready(function () {
    $('#btn').click(function () {
        $(colElem).append(1);
    });
});

但是这段代码只填充了右下角。请提供有关如何通过 Fill 按钮用随机数填充表格的所有单元格的信息

Answer 1

$(colElem) 选择器指向表格的最后一个单元格...您需要选择每个单元格并分配随机数...查看下面的代码(它将添加 0 到 99 之间的随机数) 解决问题...从按钮中删除 onclick="fillTable()"..

$('#btn').click(function () {
  $(tableElem).find("td").each(function(){
      $(this).html(Math.floor(Math.random() * 100));
  });
});