點擊顯示並將其更改爲文本框

Question

我剛開始開發web。我目前被困在一個不確定如何解決它的問題中。

我有2頁，一個給我輸入產品名稱和它的價格。點擊保存按鈕後，它會保存到數據庫，成功保存數據後，它會爲我加載頁面以繼續輸入數據。當我點擊報告按鈕時，我將進入報告頁面（這裏是問題的開始處）。我可以看到帶有colums和行的數據很好地顯示的表格：產品名稱和價格。我想在這裏做的是按我喜歡的方式編輯數據。我點擊產品，它會改變到文本框，並仍然保持文本框內的數據，（意思是說，它不會只是只讀）。價格也一樣。我以前做的是：每行都有複選框，點擊複選框，我會使用jquery這樣的東西來改變。

$("input[name^='chk']").click(function() { 
     $("input[name^='chk']").each(function() { 
     if($(this).is(':checked')) { 
      var i = $(this).val(); 
      $("#cost"+i).attr('readonly', false); 
      $("#qty"+i).attr('readonly', false); 
     }else{ 
      var i = $(this).val(); 
      $("#cost"+i).attr('readonly', true); 
      $("#qty"+i).attr('readonly', true); 
     } 
     }); 
    }); 

但我現在不想要的是即使在開始時也不要在文本框內顯示數據。點擊它，然後它只會改變到文本框。而且我也不希望有複選框。它使我的頁面看起來很醜。我在幾個網站上看到過這種方式，但我不知道該怎麼做。如果有人能幫我解決這個問題，我非常感謝你的幫助

Answer 1

你可以通過使用jQuery來隱藏和顯示元素。只需將文本框和顯示的數據放在頁面上，然後使用jQuery的.hide（）隱藏文本框。當用戶點擊顯示的數據時，您可以隱藏數據並在元素的.click（）中定義的點擊函數中使用.show（）顯示文本框。

另一種替代方法是在用戶單擊顯示的數據後動態插入文本框，例如使用jQuery中的.html（）。

你需要研究一下jQuery文檔來完成這樣的事情，但是一旦你掌握了它，這很容易。