如何在 html 表格中编辑内容

Question

以下代码设置表格：

gridSetup: function () {
                var self = this;
                $table = $('#csTable');
                trows = $($table).find('tbody tr');

                //0. IMPORTANT - clear table rows before re-building the table
                trows.remove();

                for (var x = 0; x < self.acYearCount; x++) {
                    var ay = x + 1;
                    //1. create a new row for each academic year
                    $tr = $('<tr class="cost-schedule ay' + [x + 1] + '"/>');
                    //2. create a new header
                    $th = $('<th class="horizontal">' + ay + '</th>');
                    //3. append header to row and row to table
                    $($table).append($($tr).append($th));
                    //4. add cells to current academic year row
                    for (var y = 0; y < 4; y++) {
                        $td = $('<td align="center"><input class="vertical" size="6" value="0"/></td>');                           
                        $($tr).append($td);
                    }
                }
            },

一个按钮运行这个：

editMe: function(){
                $("#hideAll input").attr("disabled", false);
                $("#hideAll select").attr("disabled", false);

这些函数在 vue.当我单击我的按钮时，我希望能够编辑创建的表。我尝试将 contenteditable="false" 放在 $td = $(''); 行中在 editMe 中使用 ("td").attr('contenteditable', true) 的网格设置。这些都不会使创建的表结构在按钮单击时可编辑。在上面的 editMe 中找到的行使创建的表上方的输入可编辑。感谢您的任何建议。

Answer 1

这里有很多变体：

How do I make a div element editable (like a textarea when I click it)?

另一个How to make an element's content editable with JavaScript (or jQuery)

来自 jQuery 论坛的参考：https://forum.jquery.com/topic/jquery-and-contenteditable - 他们认为所有这些都必须在您的示例中工作......

无论如何，在生产之前尝试在浏览器中使用控制台。

1) 创建单个 div#myid 并从控制台尝试 $("#myid").attr("contenteditable",true) - 会好吗？ - 不 - 检查另一个浏览器 - 可能是它的实现 - 定义

2) 用一个 tr /td#myid 创建简单表，重复测试

3) 尝试使用 table tr + 2 td 和 $('td') 选择器 - 它可以使单元格可编辑多个吗？

如果您确定这种方式有效并且 TD 变得可编辑 - 返回您的工作代码并再次检查 - 您忘记了什么。