在phpmyadmin中雙擊後編輯數據

Question

我有一個表格並顯示數據庫中的數據。我想讓用戶點擊他們想要編輯的記錄，一旦他們雙擊它，然後在數據庫中更新系統。就像phpmyadmin中的表一樣。

我該怎麼辦？

Answer 1

這裏是一個示例代碼，其中包含@rickdenhaan使用jquery提出的建議。

// On double click show the input box 
 
$("#text1").dblclick(function() { 
 

 
    $("#text1").hide(); 
 
    $("#text1_input").val($("#text1").html()); // Copies the text of the span to the input box. 
 
    $("#text1_input").show(); 
 
    $("#text1_input").focus(); 
 
    
 
}); 
 

 
// What to do when user changes the text of the input 
 
function textChanged(){ 
 

 
    $("#text1_input").hide(); 
 
    $("#text1").html($("#text1_input").val()); // Copies the text of the input box to the span. 
 
    $("#text1").show(); 
 
     
 
    // Here update the database 
 
     
 
} 
 

 
// On blur and on enter pressed, call the textChanged function 
 
$("#text1_input").blur(textChanged); 
 
$("#text1_input").keypress(function (e) { 
 
var key = e.which; 
 
if(key == 13) // the enter key code 
 
    { 
 
    textChanged(); 
 
    return false; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span id="text1">Double click me to change me</span> 
 
<Input id="text1_input" style="display:none"/>

對於使用JavaScript更新數據庫看到像堆棧溢出this職位。

在上面的代碼中，有一個帶有純文本和輸入框的跨度，供用戶更改文本。

輸入框在開始時不可見（style="display:none"）。當用戶雙擊量程（$("#text1").dblclick(function() {...});）時，量程消失（$("#text1").hide();），出現輸入框（$("#text1_input").show();），並將量程內容複製到輸入框中以供用戶更改。

當用戶按下輸入框（$("#text1_input").keypress(function (e) {...});）或在輸入框外部的某處（$("#text1_input").blur(textChanged);）單擊時，輸入框消失並且跨度重新出現，但現在具有輸入框的編輯文本。

我希望這是有幫助的。如果你想要更多或其他東西，請讓我知道。