通过选择器表单动态创建表

Question

我正在尝试使用JS和HTML动态创建NXN表。我正在从选定表单中获取用户输入。我遇到的问题是，当我想将表更改为不同的NXN时，它在当前表上添加而不是制作大小NXN的新尺寸。

这是我正在使用的功能：

var event = document.getElementById("picNum").addEventListner("click", createTable());
//Create an nxn table from the selector form
function createTable(){
    var x = document.getElementById("picNum").value / 2;
    //creates the <tr> element
    for(var i = 0; i < x; i++){ 
        var myRow = document.getElementById('myTable').insertRow(i);
        //creates the <td> element
        for(var j = 0; j < x; j++){
            var myTD = myRow.insertCell(j);
            j.innerHTML= "Row-"+ i + "Column-" + j;

    }

    }

这是HTML：

<!--This creates the selector for the game parameters -->
    <form id = "myForm">
        Select the number of pictures
        <select name ="picNum" id = "picNum" onChange="createTable()">
            <option value = "blank" id= "blank"></option>
            <option value = "8"> 8 </option>
            <option value = "10"> 10 </option>
            <option value = "12"> 12 </option>
        </select>

Answer 1

如果您想每次调用createtable时都要清空表

function createTable(){
     var Table = document.getElementById("mytable");
     Table.innerHTML = "";