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

編集可能なテーブル関数を実装するには、次の問題を解決する必要があります。
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 );
}
});

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

000001	/tr>
李思
五