按鈕點擊可編輯的數據

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