phpmyadminのようにダブルクリックした後にデータを編集する

Question

私はテーブルを持っており、データベースのデータを表示しています。ユーザーに編集したいレコードをクリックさせ、ダブルクリックするとデータベース内のシステムを更新するようにしたいと思います。 phpmyadminの表と似ています。

どうすればいいですか？

Answer 1

ここでは、jqueryを使用して@rickdenhaanによって提案されたサンプルコードを示します。

// 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);）の外側をクリックすると、入力ボックスが消えて、入力ボックスのテキストが編集された状態になります。

これは役に立ちましたと思います。何か他のものが必要な場合は、私に知らせてください。