我的Pixel Art Maker有问题。
这是我的HTML代码：
<body>
<h1> PIXEL ART MAKER </h1>
<form class='gridForm' >
Grid Height:
<input type="number" id="gridHeight">
Grid Width:
<input type="number" id="gridWidth">
<input type="submit">
</form>
<div class='colorPicker'>Pick a color
<input type='color' name='colorCanvas'> </div>
<p class='designCanvas'>Design Canvas</p>
<table id='pixels'>
</table>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>
和JS：
function makeGrid() {
$(".gridForm").submit(function(e) {
e.preventDefault();
x=$('#gridHeight').val(); // value of height
y=$('#gridWidth').val(); // value of width
for(i=0; x>i;x--){
$('#pixels').append('<tr><td></td></tr>');
}
for(j=1; y>j ;y--){
$('tr').append('<td></td>');
}
});
}
makeGrid();
除了一件事，一切都按照我想要的方式运作。当我选择高度和宽度并单击提交时，它会创建正确的表格形式，但是当我选择其他值并再次单击提交时，只需将旧表格单元格添加到旧表格单元格中。我每次都需要新的覆盖旧的。
要清除表格，请将其放在功能的顶部
$('#pixels').html("");
您已使用$（'＃pixelss）。append（）来动态插入html。所以它将继续追加你以前拥有的东西。如果你想覆盖以前的html，你最好在开始之前清除它。
function makeGrid() {
$(".gridForm").submit(function(e) {
e.preventDefault();
x=$('#gridHeight').val(); // value of height
y=$('#gridWidth').val(); // value of width
$('#pixels').html("");
$('tr').html("");
for(i=0; x>i;x--){
$('#pixels').append('<tr><td></td></tr>');
}
for(j=1; y>j ;y--){
$('tr').append('<td></td>');
}
});
}
makeGrid();