とにかく、複雑になってしまったので絵にしてみました。 デモページ(送信ボタンで一覧表示した後でデモ)
ソースコードはこんな感じ
$("#data .row_data").each(function(i){
var td = $(this).find("td").eq(2);
td.css(
{ "text-decoration":"underline", "cursor":"crosshair", "background-color" : "pink" }
);
// 入力内容
var text = td.text();
// 入力内容を保存
td.data("text", text );
td.on("click", function(){
if ( $(this).data("input") != "use" ) {
// 入力切替えフラグ
$(this).data("input", "use" );
// 入力内容
var text_now = $(this).text();
// TD の表示を消去
$(this).text("");
// 入力を追加
$("<input>")
.appendTo($(this)) // TD に追加
.val(text_now) // テキストセット
.focus() // フォーカスセット
// focusout で元に戻す
.on( "focusout", function(){
// 現在の入力
var text = $(this).val();
// 親 TD
var td = $(this).parent();
// データが変更されていたら『変更フラグ』をセット
if ( text != td.data("text") ) {
td.data("change", "yes");
td.css("background-color","silver");
}
else {
td.data("change", "");
td.css("background-color","pink");
}
// TD に値を戻して 切替えフラグを消去
td
.append(text)
.data("input", "" );
// INPUT を削除
$(this).remove();
});
}
});
});
|
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
- jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直..
