在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);）单击时，输入框消失并且跨度重新出现，但现在具有输入框的编辑文本。

我希望这是有帮助的。如果你想要更多或其他东西，请让我知道。