简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jQuery (非 HTML5) 編集可能テーブルの実装 code_jquery

WBOY
リリース： 2016-05-16 17:46:53
オリジナル
1087 人が閲覧しました
機能:
セルをクリックして選択します。選択プロセス中に選択したセルを変更するには、Enter キーを押すか、セルを直接ダブルクリックします。選択プロセスでセルがフォーカスを失います。変更された内容が保存されます。

主な実装アイデア:
選択、選択領域の移動などはすべて、jQuery の強力な API に依存して実装されます。編集可能なセルは、セルが選択されると実際に入力フィールドをセルに追加し、データを動的に更新します

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

;tr>




editable simpleInput">ar Thinking




項目 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
関連ラベル：
編集可能 シート
ソース：php.cn
前の記事：jquery を使用してクリックの背景色を変更する 次の記事：JavaScript 子ウィンドウでの親ウィンドウ オブジェクトの操作 ModalDialog_基礎知識
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
数独チェッカーが動作しないのですが？エラーの特定を手伝ってくれる人はいますか? オンラインエディターですべてを試しましたが、それでもエラーが発生します。しかし、私のマシンのVSCodeでこれを実行すると、正常に動作します。混乱していて、バグを見つけずにコードを...
から 2024-04-06 21:21:07
0
1
474
SCSSを使用してデフォルト値とCSS変数を生成する ウェブサイトのスタイリングを実装しています。レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は...
から 2024-04-06 17:46:54
0
1
355
部分的な値の条件でクエリを記録する - SQL スキルの共有 zipcode というテーブルがあり、code という列があります。コード列には、郵便番号のプレフィックスが含まれています (例: 395453302120312)。指定された郵便...
から 2024-04-06 16:01:26
0
1
395
ASP クラシック コードを文字列として MYSQL データベースに保存する可能性 ASP クラシック コードを MySQL データベースに保存し、プルされたときにコードを実行させることは可能ですか?たとえば、変数名を文字列に保存し、それを表示する前に ASP を...
から 2024-04-06 13:38:43
0
1
358
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！