當使用javascript單擊編輯按鈕時，該行如何編輯？

Question

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

我希望在單擊「編輯」按鈕時使行可編輯，我該怎麼做？

Answer 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"); 
 
      });

Answer 2

您可以通過添加contenteditable="true"使td編輯。見下面的代碼。

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

希望這會有所幫助。