Question

我正在从头开始创建HTML WYSIWYG编辑器，在表格方面我遇到了问题。不知何故，我能够创建假装数量的列，但只能创建一行（没有标题）。如果有人能说出问题是什么，我会感激不尽。

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

我发现了错误。这样一个愚蠢的错误...... 我正在使用相同的＆＃34;我＆＃34; var用于嵌套for循环及其父循环。

这是正确的版本：

$('#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);
    });

WYSIWYG编辑器中的表格问题

1 个答案: