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内容。

每次单击按钮时生成新网格

1 个答案: