javascript - 从选择器表单动态创建表格

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 = "";