使用javascript单击编辑按钮时如何使行可编辑？

【问题标题】：How make the row editable when edit button is clicked using javascript?使用javascript单击编辑按钮时如何使行可编辑？
【发布时间】：2016-01-19 23:43:32
【问题描述】：

$('#dependents-info').on('click', '.btn-edit-dependent', function () {
                var currentTD = $(this).parents('tr').find('td');
                //what code will I put here?
            });

我想在单击“编辑”按钮时使该行可编辑，我该怎么做？

【问题讨论】：

标签： javascript jquery html-table row

【解决方案1】：

您需要在 td 中创建输入字段，然后当您想要保存它们时使用 javascript 加载值并存储它们。所以你可以这样做

$('#dependents-info').on('click', '.btn-edit-dependent', function () {
                var currentTD = $(this).parents('tr').find('td');
               var newInput = currentTD.appendChild("input");
                newInput.setAttribute("id","newInput1");
            });

【讨论】：

【解决方案2】：

您可以通过添加contenteditable="true" 使td 可编辑。请参阅下面的代码。

        $('#dependents-info').on('click', '.btn-edit-dependent', function () {
            var currentTD = $(this).parents('tr').find('td');
            currentTD.prop("contenteditable","true");
        });

希望这会有所帮助。

【讨论】：