按钮单击时可编辑的数据

Question

如何使文本中的所有td行在按钮上显示一个文本框，以编辑db中的数据。例： Before edit is clicked

After edit is clicked

Answer 1

在表格中添加课程。单击某行时，将遍历该行中的每个单元格。

如果没有input elemenet，则获取单元格的内容，清除内容并添加带有文本的input元素。

这是一个有效的jsFiddle。

警告：您应该处理输入值的名称，如果不仅有纯文本，您应该关注单元格值中的html标记。

<强> HTML

    <table class="editable" style="border: 1px solid #000; border-collapse: collapse">
    <tr>
        <td style="border: 1px solid #000; padding: 10px;">This is a text</td>
        <td style="border: 1px solid #000; padding: 10px;">Another text</td>
    </tr>
</table>

<强>的jQuery

$('table.editable').on('click', 'tr', function () {
    $(this).find('td').each(function () {
        if ($(this).find('input').length < 1) {
        let html = $(this).html();
                $(this).empty();
        $(this).append('<input name="value[]" value="' + html + '" />');
        }
    });
});