按钮点击可编辑的数据

Question

如何使文本中的所有td行出现在按钮上的文本框单击编辑数据库中的数据。例如： 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 + '" />'); 
     } 
    }); 
});