Jquery を使用して、テキストをクリックするとテキスト ボックスに変わり、変更できることを認識します_jquery

Jquery を使用すると、テキスト ボックス内のテキストをクリックしたときの効果を実現し、テキスト ボックス内のテキストを変更できます。

1. テキストをクリックしてテキスト ボックスにします
2. テキスト ボックスですべてのテキストが自動的に選択されます
3. テキスト ボックスの内容を変更します
4. 外側をクリックしますテキスト ボックスが開き、テキスト ボックスが再度開きます。 変更したテキストに変更します
5. SQL データベースの内容を同期的に更新します

コードの HTML 部分

コードをコピーします コードは次のとおりです:

td>ID



1





b>3

名前	操作 /b>
	削除
2	はは
はは	削除< /td>

次のコードを使用して新しい edit.js ファイルを作成します。 🎜>

コードをコピー

コードは次のとおりです。 $(function() { //Get theクラス caname$(".caname" ).click(function() {

var td = $(this);

var txt = td.text();
var input = の要素$("");
td.html(input);
input.click(function() { return false; }) ;
//フォーカスを取得します
input.trigger("focus");
//テキスト ボックスがフォーカスを失った後、コンテンツを再度テキストに変更します
input.blur( ) {
var newtxt = $(this).val();
//テキストが変更されているかどうかを判断します
if (newtxt != txt) {
td.html(newtxt);
/*
* この段落ではデータベースを使用する必要はありません。
var caid = $.trim(td.prev().text());
//ajax はデータベースを変更します。パラメータ date を非同期的に追加すると、キャッシュの問題が解決されます
var url = "../common/ Handler2.ashx?caname=" newtxt "&caid=" caid "&date=" new Date(); /get() メソッドを使用して汎用ハンドラーを開き、データは返されたパラメーターを受け入れます (汎用ハンドラーのパラメーター メソッド context.Response.Write("返されるパラメーター");)
//の変更データベースは一般的なハンドラーで完成します
$.get(url, function(data) {
if(data=="1")
{
alert("このカテゴリはすでに存在します。 ");
td.html(txt);
return;
}
alert(data);
td.html(newtxt);
});
* /
}

{
td.html(newtxt)
}); >
Html ヘッダーは、自分で作成した jq クラス ライブラリ ファイルと edit.js ファイルを参照しています。順序に注意してください。




コードをコピー


コードは次のとおりです。