Редактируемые данные при нажатии кнопки

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 + '" />'); 
     } 
    }); 
});