代码之家 › 专栏 › 技术社区 › edluis97

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

wysiwyg html-table html javascript

edluis97 · 技术社区 · 7 年前

我正在从头开始创建一个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行

1 回复 | 直到 7 年前

edluis97 7 年前

我发现了错误。这么愚蠢的错误。。。我对嵌套for循环及其父循环使用了相同的“I”var。

这是正确的版本:

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前