jQuery (非 HTML5) 編集可能テーブルの実装 code_jquery
セルをクリックして選択します。選択プロセス中に選択したセルを変更するには、Enter キーを押すか、セルを直接ダブルクリックします。選択プロセスでセルがフォーカスを失います。変更された内容が保存されます。
主な実装アイデア:
選択、選択領域の移動などはすべて、jQuery の強力な API に依存して実装されます。編集可能なセルは、セルが選択されると実際に入力フィールドをセルに追加し、データを動的に更新します
ソース コード:
HTML コード:
| 項目 1 | 項目 3 |
|---|---|
| ジェイソン | itzhai |
| Jason | itzhai |
| | /td> ; コードをコピーします コードは次のとおりです。 body{ text-shadow:#FFFFFF 1px 1px 1px } .editableTable; { 幅: 220px; パディング: 10px; border:1px ソリッド -webkit-border-radius: 6px; -moz-border-radius: 6px; } .editableTable thead{ 背景:#FFFFCC; td{ 背景:#66CCFF;ポインタ;
} .selectCell{ background:#6699FF; } JS コード: >コードをコピー コードは次のとおりです: var EdTable = function(){ // Bind events to cells function initBindGridEvent(){ $("td.editable").unbind(); // Add cell click event addGridClickEvent(); // Add cell double-click event addGridDbClickEvent(); // Add keyboard event addGridKeyPressEvent(); } // Add a click event to the cell function addGridClickEvent(){ $("td.simpleInput").bind("click",function(){ $('. simpleInput').each(function(){ $(this).removeClass("selectCell"); }); // Add a selection style to the selected element $(this) .addClass("selectCell"); }); } //Add a double-click event to the cell function addGridDbClickEvent(){ $("td.simpleInput").bind ("dblclick",function(){ $('.simpleInput').each(function(){ $(this).removeClass("selectCell"); }); var val=$(this).html(); var width = $(this).css("width"); var height = $(this).css("height"); $(this).html(""); $(this).children("input").select(); }); } // to the cell Add keyboard event function addGridKeyPressEvent(){ $(document).keyup(function(event){ if(event.keyCode == 37){ // Left Arrow var selectCell = $(".selectCell").prev()[0]; if(selectCell != undefined){ $(".selectCell").removeClass("selectCell").prev(). addClass("selectCell"); } } else if(event.keyCode == 38){ // Up arrow var col = $(".selectCell").prevAll() .length; var topCell = $(".selectCell").parent("tr").prev().children()[col]; if(topCell != undefined){ $ (".selectCell").removeClass("selectCell"); $(topCell).addClass("selectCell"); } } else if(event.keyCode == 39){ // Right arrow var selectCell = $(".selectCell").next()[0]; if(selectCell != undefined){ $(".selectCell").removeClass( "selectCell").next().addClass("selectCell"); } } else if(event.keyCode == 40){ // Down Arrow var col = $( ".selectCell").prevAll().length; var topCell = $(".selectCell").parent("tr").next().children()[col]; if(topCell != undefined){ $(".selectCell").removeClass("selectCell"); $(topCell).addClass("selectCell"); } } else if(event .keyCode == 13){ //Enter key var selectCell = $(".selectCell")[0]; if(selectCell != undefined){ $(selectCell) .dblclick(); } } }); } // Save table information after the cell loses focus function saveEdit(gridCell){ var pnt =$(gridCell).parent(); $(pnt).html($(gridCell).attr("value")); $(gridCell).remove(); } return{ initBindGridEvent : initBindGridEvent, saveEdit : saveEdit } }(); Source code download: EditableTable.rar このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undressリアルなヌード写真を作成する AI 搭載アプリ 
AI Clothes Remover写真から衣服を削除するオンライン AI ツール。 
Undress AI Tool脱衣画像を無料で 
Clothoff.ioAI衣類リムーバー 
AI Hentai GeneratorAIヘンタイを無料で生成します。 
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
2週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
1 か月前
By DDD
R.E.P.O.最高のグラフィック設定
2週間前
By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
1週間前
By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
2週間前
By 尊渡假赌尊渡假赌尊渡假赌
ホットツール
メモ帳++7.3.1使いやすく無料のコードエディター 
SublimeText3 中国語版中国語版、とても使いやすい 
ゼンドスタジオ 13.0.1強力な PHP 統合開発環境 
ドリームウィーバー CS6ビジュアル Web 開発ツール 
SublimeText3 Mac版神レベルのコード編集ソフト（SublimeText3）
ホットトピック
PPT テーブルに挿入される画像の形式を調整する手順
Mar 26, 2024 pm 04:16 PM
1. 新しい PPT ファイルを作成し、例として [PPT Tips] という名前を付けます。 2. [PPT Tips]をダブルクリックしてPPTファイルを開きます。 3. 例として 2 行 2 列の表を挿入します。 4. 表の境界線をダブルクリックすると、上部ツールバーに[デザイン]オプションが表示されます。 5. [シェーディング]オプションをクリックし、[画像]をクリックします。 6. [画像]をクリックすると、画像を背景にした塗りつぶしオプションダイアログボックスが表示されます。 7. ディレクトリ内で挿入したいトレイを見つけ、「OK」をクリックして画像を挿入します。 8. テーブル ボックスを右クリックして、設定ダイアログ ボックスを表示します。 9. [セルの書式設定]をクリックし、[画像を網掛けとして並べる]にチェックを入れます。 10. [中央]、[ミラー]など必要な機能を設定し、[OK]をクリックします。注: デフォルトでは、表に画像が入力されます。 
売上予測表の作り方
Mar 20, 2024 pm 03:06 PM
帳票を上手に作成できることは、経理や人事、財務の分野だけでなく、多くの営業職にとっても帳票の作成を学ぶことは非常に重要です。なぜなら、販売に関連するデータは非常に大規模かつ複雑であり、問題を説明するために文書に単純に記録することはできないからです。より多くの営業マンがExcelを使った表作成に習熟できるよう、売上予測に関する表作成の課題を編集部が紹介しますので、お困りの友人は必見です！ 1. [売上予測・目標設定]xlsmを開き、各テーブルに格納されているデータを分析します。 2. 新規に[空のワークシート]を作成し、[セル]を選択し、[ラベル情報]を入力します。下に[ドラッグ]し、月を[塗りつぶします]。 [その他]のデータを入力し、[ 
JavaScript を使用してテーブルの列幅のドラッグ アンド ドロップ調整を実装するにはどうすればよいですか?
Oct 21, 2023 am 08:14 AM
JavaScriptを使用してテーブルの列幅のドラッグアンドドロップ調整機能を実現するにはどうすればよいですか? Web テクノロジーの発展に伴い、Web ページ上に表形式で表示されるデータがますます増えています。ただし、表の列幅がニーズを満たせない場合があり、内容がオーバーフローしたり、幅が不足したりすることがあります。この問題を解決するには、JavaScript を使用してテーブルの列幅のドラッグ アンド ドロップ調整機能を実装し、ユーザーが必要に応じて列幅を自由に調整できるようにします。テーブルの列幅のドラッグ アンド ドロップ調整機能を実現するには、主に次の 3 つのポイントが必要です。 
条件に応じて色を自動変更するWPS値の設定方法_条件に応じて色を自動変更するWPSテーブル値の設定手順
Mar 27, 2024 pm 07:30 PM
1. ワークシートを開き、[スタート]-[条件付き書式]ボタンを見つけます。 2. [列の選択] をクリックし、条件付き書式を追加する列を選択します。 3. [条件付き書式]ボタンをクリックするとオプションメニューが表示されます。 4. [条件付きルールを強調表示]-[間]を選択します。 5. ルールを入力します: 20、24、濃い緑色のテキストと濃い塗りつぶし。 6. 確認後、選択した列のデータは、設定に従って対応する数値、テキスト、セル ボックスで色付けされます。 7. 競合のない条件付きルールは繰り返し追加できますが、競合するルールの場合、WPS は以前に確立された条件付きルールを最後に追加したルールに置き換えます。 8. [Between] ルール 20 ～ 24 と [Less than] 20 の後にセル列を繰り返し追加します。 9. ルールを変更する必要がある場合は、ルールをクリアしてからルールをリセットします。 
点線の外側に帳票が印刷できない場合はどうすればよいですか?
Mar 28, 2023 am 11:38 AM
表が点線の外側に印刷できない問題の解決策: 1. Excel ファイルを開き、開いたページで「印刷」をクリックします; 2. プレビュー ページで「ズームなし」を見つけて、1 ページに調整することを選択します。 ; 3. 印刷するプリンターを選択します。ドキュメントがあれば十分です。 
Wordの表を合計する方法を知っていますか?
Mar 21, 2024 pm 01:10 PM
Word の表で数を数えるという問題に遭遇することがあります。通常、このような問題に遭遇すると、ほとんどの生徒は Word の表を Excel にコピーして計算しますが、黙って電卓を手に取る生徒もいます。簡単に計算する方法はありますか？もちろんありますが、実はWordでも合計額を計算することができます。それで、その方法を知っていますか？今日は、一緒に見ていきましょう！困っている友達はすぐに集めてください。手順の詳細: 1. まず、コンピューターで Word ソフトウェアを開き、処理する必要がある文書を開きます。 (図のように) 2. 次に、(図のように) 合計値が配置されているセルにカーソルを置き、[メニュー バー] をクリックします。 
Vue でテーブル データをエクスポートおよびインポートする方法
Oct 15, 2023 am 08:30 AM
Vue で表形式データのエクスポートとインポートを実装する方法には、特定のコード サンプルが必要です。Vue を使用して開発された Web プロジェクトでは、表形式データを Excel にエクスポートしたり、Excel ファイルをインポートしたりする必要がよく発生します。この記事では、Vue を使用してテーブル データのエクスポートおよびインポート機能を実装する方法と、具体的なコード例を紹介します。 1. テーブル データをエクスポートするためのインストールの依存関係 まず、Excel ファイルをエクスポートするためのいくつかの依存関係をインストールする必要があります。 Vue プロジェクトのコマンド ラインから次のコマンドを実行します: npmin 
JavaScriptを使用してテーブルフィルタリング機能を実装する
Aug 10, 2023 pm 09:51 PM
JavaScript を使用してテーブル フィルタリング機能を実装する インターネット技術の継続的な発展に伴い、テーブルは Web ページ上にデータを表示する一般的な方法になりました。ただし、データの量が膨大になると、ユーザーは特定のデータを見つけるのが困難になることがよくあります。したがって、ユーザーが必要なデータをすぐに見つけられるようにテーブルにフィルタリング機能を追加することが、多くの Web デザインの要件になっています。この記事では、JavaScriptを使用してテーブルフィルタリング機能を実装する方法を紹介します。まず、データのテーブルが必要です。簡単な例を次に示します: <t 
|
