每次單擊按鈕時生成新網格

Question

這是用於生成網格的 html 代碼。 當點擊提交按鈕時，它會生成一個新網格並將其添加到舊網格的末尾。

<form id="sizePicker">
    Grid Height:
    <input type="number" id="input_height" name="height" min="1" value="1">
    Grid Width:
    <input type="number" id="input_width" name="width" min="1" value="1">
    <button id="Button" type="button">submit</button>
</form>
<h2>Design Canvas</h2>
<table id="pixel_canvas"></table>

這是使用的javascript代碼。

const inputHeight = $('#input_height');
const inputWidth = $('#input_width');
function makeGrid() {
    const height = parseInt(inputHeight.val());
    const width = parseInt(inputWidth.val());
    for(let row = 0; row < height; row++) {
        const tr = $('<tr></tr>');
        for(let cell = 0; cell < width; cell++) {
            tr.append('<td></td>');
        }
        $('#pixel_canvas').append(tr);
    }
}
$('#Button').on('click', makeGrid);

我們如何解決這個問題？

Answer 1

您使用 jQuery append()這正是您所說的 - 向現有元素添加新行：

將參數指定的內容插入到匹配元素集中每個元素的末尾。

您需要在追加之前清空元素，或者更好的是生成新內容，而不是使用 jQuery html()方法設置元素的 html：

const inputHeight = $('#input_height');
const inputWidth = $('#input_width');
function makeGrid() {
    const height = parseInt(inputHeight.val());
    const width = parseInt(inputWidth.val());
    var newGridHtml = ''; /* Here we generate grid HTML */
    for(let row = 0; row < height; row++) {
        newGridHtml += '<tr>';
        for(let cell = 0; cell < width; cell++) {
            newGridHtml += '<td></td>';
        }
        newGridHtml += '</tr>';
    }
    $('#pixel_canvas').html( newGridHtml ); /* No appending here */
}
$('#Button').on('click', makeGrid);

html()作用是：

獲取匹配元素集中第一個元素的 HTML 內容或設置每個匹配元素的 HTML 內容。