Question

我创建了一个简单的表单，允许用户创建一些具有可变行数和列数的空白表。代码不会产生任何错误，并会简单地创建新的表元素，但是当函数结束时，表会消失。我做错了什么？

function genTable(){
    var numRows = parseInt(document.getElementById("numRows").value); // Number of rows per table
    var numCols = parseInt(document.getElementById("numCols").value); // Number of columns per table
    var numTabs = parseInt(document.getElementById("numTabs").value); // number of tables

    var startDiv = document.getElementById("start");
    var oneCell = "<td class=\"cell\"></td>"; // HTML for a single cell
    var myHTML = ""; // An empty string to contain the tables

    for(i=0; i<numTabs; i++){
        myHTML += "<div><table class=\"linesTab\" id=\"winLine" + (i+1) + "\">";

        for(k=0; k<numRows; k++){
            myHTML += "<tr>";

            for(j=0; j<numCols; j++){
            myHTML += oneCell;
            }

            myHTML += "</tr>";
        }


        myHTML += "</table><br><span class=\"tabSpan\">" + (i+1) + "</span></div>";
    }

    startDiv.innerHTML= myHTML;

}

Answer 1

听起来你有一个内置于超链接或表单的触发器......所以尽管你的脚本运行，浏览器会导航并刷新页面。

如果您有点击事件，则需要停止传播事件。

简短的例子：

HTML

<div id="example">


</div>

<form>
    <input type="number" id="num" />
    <button id="clicker">
    Go
    </button>
</form>

的JavaScript

document.getElementById('clicker').onclick = function () {
    document.getElementById('example').innerHTML = 'Content';
    // return false; // <-- without this (or an alternative) the form posts
}

当函数结束时，新元素消失

1 个答案: