Javascript 奇怪的动态表错误_Javascript_Html

Javascript 奇怪的动态表错误

javascript html

Javascript 奇怪的动态表错误,javascript,html,Javascript,Html,我的HTML： <html> <head> <title>Table</title> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="script.js">

我的HTML：

<html>
    <head>
        <title>Table</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        Row:<input id="gRow">Col:<input id="gCol"><button onClick="selectCell()">Find</button>
        <button onClick="addCol(); update();">Add Col</button><br/>
        <button onClick="addRow(); update();">Add Row</button><br/>
        <table id="tab">
            <tr class="rowtitle">
                <td></td>
                <th>1</th>
            </tr>
            <tr class="row row-1">
                <th class="coltitle">1</th>
                <td class="col col-1 edit"></td>
            </tr>
        </table>
        <script type="text/javascript">
            update();
            function update(){
                $('.edit').bind('dblclick', function() {
                    $(this).attr('contentEditable', true);
                }).blur(function() {
                    $(this).attr('contentEditable', false);
                });
            }
        </script>
    </body>
</html>


桌子
行：列：查找
添加列

添加行

1.
1.
更新（）；
函数更新（）{
$（'.edit'）.bind（'dblclick'，function（）{
$（this.attr（'contentEditable'，true）；
}).blur（函数（）{
$（this.attr（'contentEditable'，false）；
});
}

我的Javascript：

nCol = 1,
nRow = 1;

var addCol = function(){
    nCol++;
    //add nes cols
    $('.rowtitle').append("<th class='title'>"+nCol+"</th>");
    for (var i = 0; i <= nCol; i++) {
        $('.row-'+i).append( "<td class = 'col col-" + i + " edit'></tr>" );
    };

};

var addRow = function(){
    nRow++;
    $("#tab").append( "<tr class = 'row row-" + nRow + "'></tr>" );

    $('.row-'+nRow).append("<th class='coltitle'>"+nRow+"</th>")
    //add nes cols
    for (var i = 1; i <= nCol; i++) {
        $('.row-'+nRow).append( "<td class = 'col col-" + i + " edit'></tr>" );
    };
};

var selectCell = function(){
    var col = $('#gCol').val(),
        row = $('#gRow').val();

    console.log('.row-'+row+' .col-'+col);
    $('.row-'+row+' .col-'+col).css('background-color', 'red');
};

nCol=1，
nRow=1；
var addCol=函数（）{
nCol++；
//添加nes cols
$（'.rowtitle'）。追加（“+nCol+”）；
对于（var i=0；i您的addCol有错误。它应该是：
var addCol = function () {
    nCol++;
    //add nes cols
    $('.rowtitle').append("<th class='title'>" + nCol + "</th>");
    $('.row').append("<td class = 'col col-" + nCol + " edit'></tr>");
};

var addCol=函数（）{
nCol++；
//添加nes cols
$（'.rowtitle'）。追加（“+nCol+”）；
$（'.row'）。追加（“”）；
};
提示：$（this.attr（'contentediate'，true）.focus（）；
在任何情况下都有bug：按照以下步骤查看问题：单击：四次添加行，然后四次添加Col@RokoC.Buljan.focus（）有什么作用？我注意到了bug。你知道我如何修复它吗？.focus（）
在contenteditable单元格内设置闪烁的插入符号。如果没有它，您需要实际单击三次才能获得焦点。它仍然存在问题：单击：四次添加行，而不是四次添加列。我刚刚注意到的另一件事是，如果您单击两次新行，然后单击第2列，它会变得很奇怪。您知道如何解决这个问题吗？@RokoC.Bul简，我刚才也看到了。你知道我怎么解决它吗？哎呀，你在数列来循环你的行。你的列被认为是有效的。谢谢！@karaokyo我删除了循环。