Question

我的Pixel Art Maker出了问题。

这是我的HTML代码：

public static long fileno(FileDescriptor fd) throws IOException {
    try {
        if (fd.valid()) {
            // windows builds use long handle
            long fileno = getFileDescriptorField(fd, "handle", false);
            if (fileno != -1) {
                return fileno;
            }
            // unix builds use int fd
            return getFileDescriptorField(fd, "fd", true);
        }
    } catch (IllegalAccessException e) {
        throw new IOException("unable to access handle/fd fields in FileDescriptor", e);
    } catch (NoSuchFieldException e) {
        throw new IOException("FileDescriptor in this JVM lacks handle/fd fields", e);
    }
    return -1;
}

private static long getFileDescriptorField(FileDescriptor fd, String fieldName, boolean isInt) throws NoSuchFieldException, IllegalAccessException {
    Field field = FileDescriptor.class.getDeclaredField(fieldName);
    field.setAccessible(true);
    long value = isInt ? field.getInt(fd) : field.getLong(fd);
    field.setAccessible(false);
    return value;
}

和JS：

<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>

除了一件事之外，一切都按照我想要的方式运作。当我选择高度和宽度并单击提交时，它会创建正确的表格形式，但是当我选择其他值并再次单击提交时，只需将旧表格单元格添加到旧表格单元格中。我每次都需要新的一个来覆盖旧的。

Answer 1

要清除表格，请将其放在功能顶部

$('#pixels').html("");

Answer 2

您已使用$（'＃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();

单击“提交”时覆盖

2 个答案: