jQuery は、IE、Firefox、Safari、Chrome、Opera_jquery をサポートする、クロスブラウザーで編集可能なテーブルを段階的に実装します。

編集可能なテーブル関数を実装するには、次の問題を解決する必要があります。
1. 変更するデータがテーブル内のどの列であるかを明確にする (これらのセルを見つける方法)。
2. セルを作成する方法。 editable 編集済み;
3. セルのいくつかの重要なイベントを処理する方法。
4. ブラウザー間の問題を解決します。
上記の問題は、jQuery を使用して段階的に解決できます。
1. 表を描きます
まず表を描きます。 " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

編集するにはテーブルをクリックしてください



🎜>
000002 ;







以下のように表示されます。
editTable01.jpg



明らかにテーブルのようには見えません。枠線がなく、見苦しいです。そこで、最初にこのテーブルにいくつかのスタイルを設定しましょう。
コード 2:




コードをコピー


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


body{}{
フォントサイズ: 14px;
}
テーブル{}{
カラー: #4F6B72;
ボーダー: 1px ソリッド 幅: 400px ;
}
th{}{
幅: 50%; 境界線: 1px ソリッド }
td{}{
幅: 50 %;
border: 1px Solid

} 効果が大幅に向上しました: editTable02.jpg

ただし、セル間には重複する境界線がまだ存在します。重複した境界線を削除するには、このような属性をラベル セレクター テーブルに追加するだけです。
border-collapse: Collapse; >

コードをコピー


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


table{}{
color: #4F6B72; 1px ソリッド #C1DAD7;
border-collapse: 400px;
}


2.テーブルのセル グリッドが編集可能な列になります
テーブルを描画した後、テーブル内の番号付きの列を編集可能な列として選択します。この列のセルを編集可能にするには、これらの列にテキスト ボックスを挿入する必要があります。この列のセルの onclick イベントを通じてテキスト ボックスを挿入します。

コード 3:


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

$(document).ready(function(){
//学籍番号の列のセルをすべて検索
//学籍番号の列のセルはすべての TD にあるためは偶数 (0,2,4,6) なので、even
var numTd = $("tbody td:even");//Click を通じて td 内の偶数のセルにフィルターをかけることができます。これらの td、テキスト ボックスを作成します
numTd.click(function(){
//テキスト ボックス オブジェクトを作成します
var inputobj = $("");
//現在クリックされているセルオブジェクトを取得します
var tdobj = $(this);
//テキストボックスの境界線を削除します
inputobj.css("border","0");
//テキストボックスとセルの幅を一致させます
inputobj.width(tdobj.width());
//テキストボックスのフォントサイズをセルのフォントサイズと同じにしますthe cell
inputobj.css( "font-size",tdobj.css("font-size"));
//テキスト ボックスとセルのフォントを一致させます
inputobj.css("font- family",tdobj.css( "font-family"));
//テキストボックスとセルの背景を一致させる
inputobj.css("background-color",tdobj.css("background- color"));
//appendTo メソッドはテキスト ボックスを td に追加します
inputobj.appendTo(tdobj);
});
});

Nowテキスト ボックスは に挿入されました セルは にあります。テキスト ボックスを編集したいので、テキスト ボックスの値はセル内のデータから取得され、セル内の元のデータをクリアする必要があります。
コード 4:

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

$(document) .ready( function(){
//学籍番号列のセルをすべて検索
//学籍番号列のセルの位置は全tdで偶数(0, 2, 4, 6) したがって、even を使用すると、td の偶数番号のセルにフィルターをかけることができます。
var numTd = $("tbody td:even")
//これらの td をクリックすると、テキスト ボックスが作成されます
numTd.click( function(){
//テキスト ボックス オブジェクトを作成します
var inputobj = $("");
//現在クリックされているオブジェクトを取得しますcell object
var tdobj = $(this);
//セル内のテキストを取得します
var text = tdobj.html(); //セル内のテキストをクリアします
tdobj.html("" );
//テキストボックスの枠線を削除します
inputobj.css("border","0");
//テキストボックスとセルの幅を作成しますconstant
inputobj.width( tdobj.width());
//テキストボックスのフォントサイズをセルのフォントサイズと同じにします
inputobj.css("font-size", tdobj.css("font-size"));
//テキストボックスとセルのフォントを一致させる
inputobj.css("font-family",tdobj.css("font-family" ));
//テキストボックスとセルを同じにする 背景は一貫したままにする
inputobj.css("background-color",tdobj.css("background-color")); .css("color","#C75F3E");
/ /テキスト ボックスに値を割り当てます
inputobj.val(text);
//appendTo メソッドはテキスト ボックスを td
inputobj.appendTo(tdobj);
});
}) ;


しかし、上記のコードには非常に面倒な利点があります。連結。上記のコードは、次のように連結することで簡略化できます:
コード 5:

コードをコピー コードは次のとおりです: $(document).ready(function(){

//学籍番号列のセルをすべて検索

//すべての td における学籍番号列のセルの位置は偶数 (0 、2、4、6) なので、even
var numTd = $("tbody td:even");// をクリックすると、td 内の偶数のセルにフィルターできます。これらの td、テキスト ボックスを作成します
numTd.click(function(){
//テキスト ボックス オブジェクトを作成します
var inputobj = $("");
//現在クリックされているセル オブジェクトを取得します
var tdobj = $(this);
//セル内のテキストを取得します
var text = tdobj.html();
//セルのテキスト
tdobj.html("");
inputobj.css("border","0")
.css("font-size",tdobj.css("font-size) "))
.css("フォントファミリー",tdobj.css("フォントファミリー"))
.css("背景色",tdobj.css("背景色"))
.css ("color","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj)
}); 🎜>}) ;


これで、テキスト ボックスがテーブルに正常に挿入され、セルを編集できるようになりました。
editTable04.jpg
しかし、明らかな
バグがあります。同じセルを再度クリックすると、次のような効果が表示されます。

editTable05.jpg

上記のバグの原因は何ですか?セルがテキスト ボックスに挿入された後、テキスト ボックスはセルに属するため、テキスト ボックスをクリックすると、セルのクリック イベントもトリガーされます。
テキスト ボックスのクリック動作を防止する必要があります (イベントのバブリングを防止)。
コード 6:

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

inputobj.click( function() {
return false;
});

しかし、セルの境界線をクリックすると、上記のバグが引き続き表示されるため、次の判断を行います。セルが挿入されました テキストボックス、クリックイベントがポップアップします。
コード 7:

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

$(document) .ready( function(){
//学籍番号列のセルをすべて検索
//学籍番号列のセルの位置は全tdで偶数(0, 2, 4, 6) したがって、even を使用すると、td の偶数番号のセルにフィルターをかけることができます。
var numTd = $("tbody td:even")
//これらの td をクリックすると、テキスト ボックスが作成されます
numTd.click( function(){
//テキスト ボックス オブジェクトを作成します
var inputobj = $("");
//現在クリックされているオブジェクトを取得しますcell object
var tdobj = $(this);
//セル内のテキストを取得します
var text = tdobj.html(); //現在のセルにテキスト ボックスがある場合セル、メソッドから直接飛び出します
//注: テキスト ボックスを挿入する前に必ず判断してください
if(tdobj.children("input").length>0){
return false ;
}
//セルのテキストをクリア
tdobj.html("")
inputobj.css("border","0")
.css("font-size") ,tdobj.css("フォントサイズ "))
.css("フォントファミリー",tdobj.css("フォントファミリー"))
.css("背景色",tdobj.css ("背景色"))
.css("color","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj) );
inputobj.get( 0).select();
//テキストボックスのクリックイベントを防止します
inputobj.click(function(){
return false;
} );
});
});


上記のバグは解決されましたが、セルをクリックすると表面のテキストの色が変化することがわかりました。編集できるとは思えません。次に、テキスト ボックスを挿入するときに、テキスト ボックス内のテキストを選択します。

コード 8:

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

inputobj.get (0) .select();

しかし、Safari ブラウザでは、テキスト ボックスが選択されているように見える必要があります。ただし、ここではテキスト ボックスを挿入し、セルをクリックしたときにテキスト ボックスに値を割り当てるだけです。テキスト ボックスにはフォーカスがありません。解決策: jQuery のトリガー メソッドを通じてイベントをトリガーします。

コード 9:

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

inputobj.trigger( "focus" ).trigger("select");

3. テキスト ボックスのキー イベントの処理

上記の問題が解決されたので、いくつかのキー イベントをテキスト ボックスに追加してみましょう。キーストロークを取得するための keyCode はブラウザごとに異なることはわかっていますが、jQuery はこの問題の解決に役立ちます。
イベント パラメーターをイベントの関数に追加するだけで、メソッド本体で、イベント オブジェクトの what 属性を通じて keyCode を取得できます。event.that 属性は、keyCode を取得するメソッドを同化します。さまざまなブラウザで。
keyCodeを取得したら、主にESCキー(キー値:27)とEnterキー(キー値:13)の2つのキーイベントを行います。
コード 10:

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

//テキスト ボックスの Enter キーと Esc キーの操作を処理します。
//jQuery のイベント メソッドの関数はイベント パラメーターを定義でき、jQuery はブラウザー間の違いをブロックしてパスを渡します。利用可能なイベント オブジェクト
inputobj.keyup(function(event){
//現在のキーのキー値を取得します
//キーを取得するための jQuery イベント オブジェクトの属性がありますキーボード キーの値
var keycode = events.that
//キャリッジ リターンを処理します
if(keycode==13){
//現在のテキスト ボックスの内容を取得します
var inputtext = $(this ).val();
//td の内容をテキスト ボックスの内容に変更します
tdobj.html(inputtext);
// esc
if( keycode == 27){
//td の内容をテキストに復元します
tdobj.html(text);
}


以下は完全な js コードです:

コード 11:

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

$( document).ready(function(){

//学籍番号の列のセルをすべて検索
//学生の列のセルの位置が異なるためすべての td の数値は偶数 (0,2,4 ,6) であるため、even
var numTd = $("tbody td:even"); によって td の偶数番号のセルにフィルターをかけることができます。 >//これらの tds をクリックするとテキスト ボックスを作成します
numTd.click(function(){
//テキスト ボックス オブジェクトを作成します
var inputobj = $("");
//現在クリックされているユニット Cell オブジェクトを取得します
var tdobj = $(this);
//セル内のテキストを取得します
var text = tdobj.html() ;
//現在のセルにテキストボックスがある場合は、メソッドを抜けてください
//注: テキストボックスを挿入する前に必ず判断してください
if(tdobj.children( "input").length>0){
return false;
}
//セルのテキストをクリアします
tdobj.html(""); border","0")
.css("フォントサイズ",tdobj.css ("フォントサイズ"))
.css("フォントファミリー",tdobj.css("フォントファミリー) "))
.css("背景色",tdobj.css("背景色"))
.css("色","#C75F3E")
.width(tdobj.width ())
.val(text)
.appendTo(tdobj);
inputobj.get(0).select();
//テキストボックスのクリックイベントを防止します
inputobj.click(function(){
return false;
});
/ / テキスト ボックスの Enter キーと Esc キーの操作を処理します
// のイベント メソッドの関数jQuery はイベント パラメータを定義でき、jQuery はブラウザ間の違いをマスクして、使用可能なイベント オブジェクトを渡します
inputobj.keyup(function(event){
//現在のキーのキー値を取得します
//jQuery イベント オブジェクトには、キーボードのキー値を取得するための what 属性があります key
var keycode = events
// キャリッジ リターンを処理します
if(keycode==13){
//現在のテキスト ボックスの内容を取得します
var inputtext = $(this).val();
//td の内容をテキスト ボックスの内容に変更します
tdobj。 html(inputtext);
}
//esc の状況を処理します
if(keycode == 27){
//td の内容をテキストに復元します
tdobj.html(text );
}
});



関連ドキュメント パッケージのダウンロード

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript応用スキル集【おすすめ】_javascriptスキル次の記事：JavaScript応用スキル集【おすすめ】_javascriptスキル

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved

000001	/tr>
李思
五