动态表中的可编辑单元格

Question

我正在尝试使用变量号创建一个动态表。 行和列。 表已创建，但是当我单击单元格时，它们是不可编辑的，因为我认为它们将是可编辑的。

 $(document).ready(function() { $("#createit").click(function() { var num_rows = document.getElementById('rows').value; var num_cols = document.getElementById('cols').value; var tbody = ''; for (var i = 0; i < num_rows; i++) { tbody += '<tr>'; for (var j = 0; j < num_cols; j++) { tbody += '<td tabindex=' + j + '>'; tbody += 'Cell' + i + j; tbody += '</td>' } tbody += '</tr>'; } //document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; $('.editableTable').append(tbody); }); }); $(".editableTable td").dblclick(function() { console.log('clicked'); var OriginalContent = $(this).text(); $(this).addClass("cellEditing"); $(this).html("<select><option>1</option><option>2</option><option >3</option></select>"); $(this).children().first().focus(); $(this).bgColor = 'red'; $(this).children().first().keypress(function(e) { if (e.which == 13) { var newContent = OriginalContent; $(this).parent().text(OriginalContent); $(this).parent().removeClass("cellEditing"); } }); $(this).children().first().blur(function() { $(this).parent().text(OriginalContent); $(this).parent().removeClass("cellEditing"); }); }); $(".editableTable td").bind('keydown', function(event) { if (event.keyCode === 9 || event.keyCode === 13) { var tabindex = $(this).attr('tabindex'); tabindex++; //increment tabindex $('[tabindex=' + tabindex + ']').focus().dblclick(); return false; } }); 

 .editableTable { border: solid 0px; width: 100%; text-align: center } .editableTable td { border: solid 0.5px; border-color: lightblue; min-width: 100px; } .editableTable .cellEditing { padding: 0; } select { border: 0px; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>Rows: <input type="text" name="rows" id="rows"/></label><br /> <label>Cols: <input type="text" name="cols" id="cols"/></label><br/> <input name="generate" type="button" value="Create Table!" id='createit' /> <div id="wrapper"> <table class="editableTable"> <tbody></tbody> </table> </div> 

我以前做过同样的事情，但是有一个静态表。 JSFIDDLE https://jsfiddle.net/rbrohitbisht/691rx62k/

现在我想对动态表做同样的事情。 我在这里做错了什么？

Answer 1

该操作应移至createit处理程序定义中。

 $(".editableTable td").dblclick(function() {...});

在创建单元之后（当然，在单击Crete Table之后！）。

否则，选择器$（“。editableTable td”）在动态表到位之前不会返回任何内容。

Answer 2

您应该在代码中添加contenteditable="true"

https://codepen.io/anon/pen/XgJaxE

$(document).ready(function() {
        $("#createit").click(function() {
            var num_rows = document.getElementById('rows').value;
            var num_cols = document.getElementById('cols').value;
            var tbody = '';
            for (var i = 0; i < num_rows; i++) {
                tbody += '<tr>';
                for (var j = 0; j < num_cols; j++) {
                    tbody += '<td contenteditable="true" tabindex=' + j + '>';
                    tbody += 'Cell' + i + j;
                    tbody += '</td>'
                }
                tbody += '</tr>';
            }
            //document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
            $('.editableTable').append(tbody);
        });
    });
    $(".editableTable td").dblclick(function() {
        console.log('clicked');
        var OriginalContent = $(this).text();
        $(this).addClass("cellEditing");
        $(this).html("<select><option>1</option><option>2</option><option >3</option></select>");
        $(this).children().first().focus();
        $(this).bgColor = 'red';

        $(this).children().first().keypress(function(e) {
            if (e.which == 13) {
                var newContent = OriginalContent;
                $(this).parent().text(OriginalContent);
                $(this).parent().removeClass("cellEditing");
            }
        });
        $(this).children().first().blur(function() {
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
        });
    });
    $(".editableTable td").bind('keydown', function(event) {
        if (event.keyCode === 9 || event.keyCode === 13) {
            var tabindex = $(this).attr('tabindex');
            tabindex++; //increment tabindex
            $('[tabindex=' + tabindex + ']').focus().dblclick();
            return false;
        }
    });

Answer 3

使用HTML DOM“ contentEditable”属性元素对象 https://stackoverflow.com/a/44380264/3615816

 <input type=button value="Enable editing" onclick="document.getElementById('t1').contentEditable = 'true';alert('You can now edit table')" /> <table id="t1" border="1"> <tr><td >c1</td><td >c2</td></tr> <tr><td >cc1</td><td >cc2</td></tr> </table> <input type=button value="disable editing" onclick="document.getElementById('t1').contentEditable = 'false'; " /> 

Answer 4

  $(document).ready(function () { $("#createit").click(function () { var num_rows = document.getElementById('rows').value; var num_cols = document.getElementById('cols').value; var tbody = ''; var tabindex = 0 for (var i = 0; i < num_rows; i++) { tbody += '<tr>'; for (var j = 0; j < num_cols; j++) { tbody += '<td tabindex=' + tabindex++ + '>'; tbody += 'Cell' + i + j; tbody += '</td>' } tbody += '</tr>'; } //document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; $('.editableTable').append(tbody); }); }); $(document).on('dblclick', 'td', function () { console.log('clicked'); this.contentEditable = 'true'; }); $(document).on('keydown', 'td', function (event) { if (event.keyCode === 9 || event.keyCode === 13) { this.contentEditable = 'false'; // $(this).next().focus().dblclick().focus(); var tabindex = $(this).attr('tabindex'); tabindex++; var next = $('[tabindex=' + tabindex + ']').focus().dblclick(); if (next.is('td') == false) return true; var sel, range; if (window.getSelection && document.createRange) { range = document.createRange(); range.selectNodeContents(next[0]); range.collapse(true); sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (document.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(next[0]); range.collapse(true); range.select(); } return false; } }); 

 .editableTable { border: solid 0px; width: 100%; text-align: center } .editableTable td { border: solid 0.5px; border-color: lightblue; min-width: 100px; } .editableTable .cellEditing { padding: 0; } select { border: 0px; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>Rows: <input type="text" name="rows" id="rows"/></label><br /> <label>Cols: <input type="text" name="cols" id="cols"/></label><br/> <input name="generate" type="button" value="Create Table!" id='createit' /> <div id="wrapper"> <table class="editableTable"> <tbody></tbody> </table> </div>