Table 所见即所得编辑器中的问题

Question

我正在从头开始创建一个 HTML 所见即所得编辑器，但在涉及表格时遇到了问题。不知何故，我能够创建假装的列数但只有一行（没有标题）。如果有人能告诉我问题出在哪里，我将不胜感激。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Text Editor</title>
</head>
<body>

        <div id="Ribbon">

<div id="Ribbon-3">
        <button class="RibbonBtn" id="TableButton" title="Insert Table"><i class="fas fa-table"></i></button>
        </div>

        </div>

        <div id="TextArea">
            <div id="WYSIWYG" contenteditable="true"></div>

        </div>

    </div>




</body>
</html>

JS

window.addEventListener("load",function(){

    $('#TableButton').click(function(){
        var colnum = prompt("Indicate the number of columns");
        var rownum = prompt("Indicate the number of rows");
        var table = "";
        var tablehead = "";
        var tablebodytext = "";
        for (var i = 0; i < colnum; i++) {
            tablehead += "<th>null</th>";
        }

        var tablebody = [];
        for (var i = 0; i < rownum; i++) {
            var tablebodyrow = "";
            for (var i = 0; i < colnum; i++) {
                tablebodyrow += "<td>null</td>";
            }
            tablebody += "<tr>" + tablebodyrow + "</tr>";
        }

        table = "<table><tr>" + tablehead + "</tr>" + tablebody+ "</table>";
        document.execCommand("insertHTML",false, table);
    });


},false);

我选择了 5 列和 4 行，但它创建了 5 列和只有 1 行

Answer 1

我发现了错误。这么愚蠢的错误... 我对嵌套 for 循环及其父循环使用了相同的 "i" 变量。

这是正确的版本：

$('#TableButton').click(function(){
        var colnum = prompt("Indicate the number of columns:");
        var rownum = prompt("Indicate the number of rows:");
        var table = "";
        var tablehead = "";
        var tablebodytext = "";
        for (var i = 0; i < colnum; i++) {
            tablehead += "<th>null</th>";
        }

        var tablebody = [];
        for (var i = 0; i < rownum; i++) {
            var tablebodyrow = "";
            for (var i1 = 0; i1 < colnum; i1++) {
                tablebodyrow += "<td>null</td>";
            }
            tablebody += "<tr>" + tablebodyrow + "</tr>";
        }

        table = "<table><tr>" + tablehead + "</tr>" + "<tbody>" + tablebody + "</tbody>" + "</table>";
        document.execCommand("insertHTML",false, table);
    });

Table 所见即所得编辑器中的问题

Table Issue in WYSIWYG Editor

html

javascript

wysiwyg

html-table