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

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

1 个答案: