ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery は、IE、Firefox、Safari、Chrome、Opera_jquery をサポートする、クロスブラウザーで編集可能なテーブルを段階的に実装します。
jQuery は、IE、Firefox、Safari、Chrome、Opera_jquery をサポートする、クロスブラウザーで編集可能なテーブルを段階的に実装します。
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-05-16 18:47:311379ブラウズ
編集可能なテーブル関数を実装するには、次の問題を解決する必要があります。
1. 変更するデータがテーブル内のどの列であるかを明確にする (これらのセルを見つける方法)。
2. セルを作成する方法。 editable 編集済み;
3. セルのいくつかの重要なイベントを処理する方法。
4. ブラウザー間の問題を解決します。
上記の問題は、jQuery を使用して段階的に解決できます。
1. 表を描きます
まず表を描きます。 " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| 000001 | /tr> |
| 李思 |
| 五 |
|
以下のように表示されます。 editTable01.jpg 明らかにテーブルのようには見えません。枠線がなく、見苦しいです。そこで、最初にこのテーブルにいくつかのスタイルを設定しましょう。 コード 2: コードをコピー コードは次のとおりです: body{}{ フォントサイズ: 14px; } テーブル{}{ カラー: #4F6B72; ボーダー: 1px ソリッド 幅: 400px ; } th{}{ 幅: 50%;  境界線: 1px ソリッド } td{}{ 幅: 50 %; border: 1px Solid ただし、セル間には重複する境界線がまだ存在します。重複した境界線を削除するには、このような属性をラベル セレクター テーブルに追加するだけです。 border-collapse: Collapse; > コードをコピー コードは次のとおりです: table{}{ color: #4F6B72; 1px ソリッド #C1DAD7; border-collapse: 400px; } 2.テーブルのセル グリッドが編集可能な列になります テーブルを描画した後、テーブル内の番号付きの列を編集可能な列として選択します。この列のセルを編集可能にするには、これらの列にテキスト ボックスを挿入する必要があります。この列のセルの onclick イベントを通じてテキスト ボックスを挿入します。 コードをコピー  コードは次のとおりです: $(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); }); }); コード 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 inputobj.click( function() { しかし、セルの境界線をクリックすると、上記のバグが引き続き表示されるため、次の判断を行います。セルが挿入されました テキストボックス、クリックイベントがポップアップします。 return false; }); コード 7: コードをコピー コードは次のとおりです: $(document) .ready( function(){ コード 8: //学籍番号列のセルをすべて検索 //学籍番号列のセルの位置は全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; } ); }); }); 上記のバグは解決されましたが、セルをクリックすると表面のテキストの色が変化することがわかりました。編集できるとは思えません。次に、テキスト ボックスを挿入するときに、テキスト ボックス内のテキストを選択します。 コードをコピー コードは次のとおりです: inputobj.get (0) .select(); しかし、Safari ブラウザでは、テキスト ボックスが選択されているように見える必要があります。ただし、ここではテキスト ボックスを挿入し、セルをクリックしたときにテキスト ボックスに値を割り当てるだけです。テキスト ボックスにはフォーカスがありません。解決策: jQuery のトリガー メソッドを通じてイベントをトリガーします。 コードをコピーします コードは次のとおりです: inputobj.trigger( "focus" ).trigger("select"); 3. テキスト ボックスのキー イベントの処理 イベント パラメーターをイベントの関数に追加するだけで、メソッド本体で、イベント オブジェクトの 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 コードです: コードをコピー コードは次のとおりです: $( 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 ); } }); 関連ドキュメント パッケージのダウンロード |
