动态表格中的可编辑单元格答案

【问题标题】：Editable cells in dynamic table动态表格中的可编辑单元格
【发布时间】：2017-06-05 13:25:18
【问题描述】：

我正在尝试制作一个带有变量号的动态表。行和列。表格已创建，但当我单击单元格时，它们无法像我想象的那样可编辑。

$(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>

我以前做过同样的事情，但使用的是静态表。 JSFIDDLEhttps://jsfiddle.net/rbrohitbisht/691rx62k/

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

【问题讨论】：

哪里 contenteditable="true" 添加到单元格中？
@RouthMedia，我想你没有访问我在问题中提到的那个 jsfiddle。请看一下。

标签： javascript jquery html editablegrid

【解决方案1】：

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

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

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

否则选择器 $(".editableTable td") 在动态表就位之前不会返回任何内容。

【讨论】：

这解决了我的问题。但我有一个疑问，我只有在某些 'td' 被 dblclicked 时才调用 $(".editableTable td") ，所以，这意味着只有在创建表之后，毕竟，我只能在创建后单击表格单元格桌子。所以从逻辑上讲，它应该与 $(".editableTable td").dblclick(function(){}); 一起使用。或者它的工作方式就像在加载 js 时，如果它没有找到任何具有此名称的类，那么它不会返回任何内容？
$(".editableTable td").dblclick(..) 在最初的文档加载时被调用。在那一刻，选择器什么也不返回。因此，事件处理程序根本不附加任何东西。为了更好地理解事情，尝试在 firebug 中运行这段代码，然后创建表。运行此代码后，您将看到处理程序附加到的所有元素。在没有创建表的情况下运行相同的操作。你会看到不同之处。

【解决方案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;
        }
    });

【讨论】：

因为我已经说明了我要做什么，并且还提到了一个 JSFIDDLE，我不需要让它 contenteditable="true"，但现在我得到了答案，谢谢你的时间和反应。 codepen.io/anon/pen/owgyqg#anon-login

【解决方案3】：

 $(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>

【讨论】：

【解决方案4】：

use HTML DOM "contentEditable" Property Element Object 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'; " />

【讨论】：

感谢您的回复，但这不是我要找的...
亲爱的朋友。我知道您的问题，这是您的代码的补充代码 sn-p 并为表格自动创建以对其进行编辑，您可以使用此代码
首先，表格单元格必须仅在单击单元格时才可编辑。可编辑单元格可能包含选项选择、文本框等。在编辑单元格时，当按下选项卡时，它应该聚焦下一个选项卡索引单元格并使其可编辑。最后一件事，应该保留单元格的原始值，从下拉列表中选择的值将用于进一步的事情。