同じテーブルですか？異なるテーブル (編集可能な状態テーブル)

ホームページ

ウェブフロントエンド

jsチュートリアル

同じテーブルですか？異なるテーブル (編集可能な状態テーブル)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:49 PM

table 編集可能

新しい一日が始まり、生活は続きます。今日共有したいのは、データを表示するために使用される通常のテーブルです。データを表示するだけでなく、データを編集することもできます。マウスでデータをクリックすると、対応するデータグリッドが編集可能になります。早速、今日のトピックに入りましょう:

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

JQueryProject1
;script type="text/javascript" src="js/jquery-1.8.1.min.js">

🎜>

< th>名前

;Zhao Liu

はい、これはまったくスタイルのない通常のテーブルです。このテーブルに CSS スタイルを導入しましょう。 >コードをコピーします

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

table{
width:400px;
height: 150px;
テーブル、テーブル td、テーブル th{
border:1px ソリッドブラック;
border-collapse: 折りたたむ
}
table td{
width:50%; ;
}
こちら{
背景色:#87CEFA; こちら{
背景色:# FFFACD;

HTML ページには編集可能なページ要素がいくつかしかありませんが、テーブルを編集可能にするには、テーブルに編集可能なページ要素を追加して装飾する必要があります。 CSS を使用して通常のテーブルのように見せますが、編集可能な関数を使用します。JS コードは次のとおりです。コードをコピーします。 >

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

$(function(){
var content;
$( "#content tr:odd").css( "背景色","#D2B48C");
$("#content tr:even").css("背景色","#C0C0C0") ;
$("#content td") ).click(function(){
var clickObj = $(this);
content = clickObj.html();
changeToEdit(clickObj);
});ノード){
node.html("");
var inputObj = $("");
inputObj.css("border","0 ").css("背景色",node.css("背景色"))
.css("フォントサイズ",node.css("フォントサイズ")).css("高さ" ","20px")
.css("width",node.css("width")).val(content).appendTo(node)
.get(0).select();
inputObj.click(function(){
return false;

}).keyup(function(event){
var keyvalue =event.that;
if(keyvalue==13){

node.html(node.children("input").val()); } if(keyvalue==27){ ノード .html(コンテンツ); 🎜>}).blur(function(){ if(node.children("input").val()!=content){ if(confirm ("変更したコンテンツを保存しますか? ","はい","いいえ")){ node.html(node.children("input").val());

}else{

node.html(content);
}
}else{
node.html(コンテンツ)
}
});
次に、この JS の簡単な分析を行ってみましょう。編集前にテーブルの内容を保存するために、グローバル変数 var content が使用されます。そのため、ユーザーはテーブルを編集しますが、編集結果を保存したくない場合があります。テーブルを保存するには、の内容が編集前の状態に復元されるため、マウスをクリックしたときは、最初にテーブルの内容を保存する必要があります。

次の 2 つの文 $("#content tr:odd").css("background-color","#D2B48C"); $("#content tr:even").css("background -color","#C0C0C0"); は、テーブルの可視性を高めるために、テーブルの行の色を交互に変更することです。 var inputObj = $(""); この文は編集可能な JQuery オブジェクトを生成し、以下の .css() メソッドに CSS を追加します。 style を inputObj オブジェクトに追加します。.css() メソッドは、オブジェクトの CSS スタイルを設定するだけでなく、オブジェクトの CSS スタイルを取得することもできます。多くの場合、JQuery メソッドの実行後に JQuery オブジェクトが返されるため、inputObj.css().css().css().... が表示されます。

appendTo() メソッドはテーブルの編集可能性を実現し (appendix() も使用可能)、編集可能な要素をテーブルに挿入します。 2 つのメソッド .get(0).select() は、編集可能な要素にフォーカスが置かれるように、inputObj 内のコンテンツを選択するために使用されます。これらの 2 つのメソッドは、appendTo()、inputObj.click( の後に記述する必要があることに注意してください。 function(){}) メソッドも必須です。このメソッドを削除すると興味深いバグが発生します。試してみてください。

次の keyup(function(event){}) を使用すると、event.that を通じてキーボードで押されたキーに対応するキー値を取得できます。一般的に使用されるキー値には、Enter キー 13、13 が含まれます。 Esc キー:27 ユーザーが Enter キーを押すと、編集した内容が保存され、テーブルが通常のテーブルに戻ります。ユーザーがテーブルの内容を復元し、テーブルが元のテーブルに戻ります。普通のテーブル。

ユーザーエクスペリエンス、Apple の出現により、この言葉の人気がさらに高まりました。私たちもその楽しみに参加するためにここにいます。ユーザーエクスペリエンスを向上させるために、ここに Blur(function(){}) メソッドが追加されています。フォーカスが編集可能な要素から離れたときに、まずテーブル内のコンテンツが変更されたかどうかを確認し、変更がない場合は直接復元します。テーブルとテーブルの内容に変更がある場合、保存するかどうかをユーザーに確認します。

今日のサンプルはほぼ完成しました。別のJSファイルでJSコードを参照すると、中国語の文字化けバグが発生する可能性があります。試してみてください。この記事を最後まで読んでいただきありがとうございます。お役に立てれば幸いです。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7644

CakePHP チュートリアル

1392

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

151

Related knowledge

Vue を使用して編集可能なデータテーブルを実装するにはどうすればよいですか? Jun 25, 2023 pm 06:20 PM

フロントエンドテクノロジーの継続的な開発により、データテーブルは企業管理とデータ表示のための重要なツールの 1 つになりました。日々の開発ではデータテーブルのデータを変更したり追加したりする必要が生じることがありますが、その際には編集可能なデータテーブルを実装する必要があります。この記事では、Vue を使用して編集可能なデータテーブルを実装する方法を紹介します。 1. 実装のアイデア編集可能なデータテーブル機能を実装するときは、次の点を考慮する必要があります。データのプレゼンテーション: 表示および編集のためにデータをテーブルにレンダリングします。テーブル編集: テーブル内のデータを編集します。

Layui を使用して編集可能な個人スケジュール管理システムを開発する方法 Oct 25, 2023 am 11:42 AM

Layui を使って編集機能をサポートした個人スケジュール管理システムを開発する方法近年、情報技術の急速な発展と人々の生活のスピードの加速に伴い、個人のスケジュール管理の重要性がますます高まっています。ユーザーが自分の時間とタスクをより適切に管理できるようにするために、JavaScript ベースのフロントエンド UI フレームワークである Layui を使用できます。豊富なコンポーネントと簡潔なスタイルを提供し、個人のスケジュール管理システムの開発に非常に適しています。 1. 環境の準備まずは開発環境を準備します。必ず確認してください

vue3テーブルコンポーネントの使い方 May 12, 2023 pm 09:40 PM

基本的なテーブルテーブルコンポーネントを開発する前に、まずどのようなスタイルの API を使用するかを考えます作者は制作作業で要素を使用するため、以前のコンポーネントのスタイルは要素に似ていますが、今回は要素スタイルを使用する予定はありません、これを変更して直接表示する予定です: ユーザーは次のように使用することを想定しています: constdataList=[{id:1,name:'"JavaEE Enterprise Application Practice"',author:'dev1ce',price:'10.22 '、説明:&# 3

Vueドキュメントでの編集可能なテーブルの実装方法 Jun 20, 2023 pm 06:43 PM

Vue.js は現在最も人気のあるフロントエンドフレームワークの 1 つであり、データ駆動型のアプローチを使用してユーザーインターフェイスを構築し、双方向のデータバインディングとコンポーネント化の特徴を備えています。 Vue.jsのドキュメントには編集可能なテーブルを実装するメソッドが記載されており、この記事ではその具体的な実装手順を紹介します。データを準備するにはまずデータを用意する必要がありますが、ここでは生徒情報を例に説明します。データ形式は配列にすることができ、各要素には名前、性別、年齢などの属性が含まれます。生徒:[{名前:'シャオ・ミン

Layui を使用して編集可能なテーブル関数を実装する方法 Oct 25, 2023 am 11:27 AM

Layui を使用して編集可能なテーブル関数を実装する方法 Layui は、豊富なコンポーネントと強力な機能を備えた、古典的で簡潔なフロントエンド UI フレームワークです。 Layui を使用した開発プロセス中に、編集可能なテーブル関数を実装する必要が生じる場合があります。この記事では、Layui のテーブルコンポーネントとフォームコンポーネントを使用して編集可能なテーブル関数を実装する方法と、具体的なコード例を紹介します。 1. Layui ライブラリの導入まず、Layui ライブラリの関連ファイルをプロジェクトに導入します。選択できる

Layui を使用して編集機能をサポートする電子書籍リーダーを開発する方法 Oct 24, 2023 am 08:08 AM

Layui を使用して編集可能な電子書籍リーダーを開発する方法の概要: Layui は、豊富な UI コンポーネントと開発ツールのセットを提供する使いやすく強力なフロントエンドフレームワークで、開発者は美しく完全に機能するものを迅速に構築できます。ウェブアプリケーション。この記事では、Layui フレームワークを使用して編集機能をサポートする電子書籍リーダーを開発する方法を紹介します。これにより、ユーザーは電子書籍内でハイライト、マーク、メモなどの操作を実行できるようになります。ステップ 1: プロジェクトの準備まず、基本的なプロジェクト構造を準備する必要があります。を作成します

Vue と Canvas を使用して編集可能なベクターグラフィックスアプリケーションを開発する方法 Jul 19, 2023 pm 03:07 PM

Vue と Canvas を使用して編集可能なベクターグラフィックスアプリケーションを開発する方法はじめに: 近年、ベクターグラフィックスはデザイン分野でますます広く使用されるようになり、Adobe Illustrator などのベクターグラフィックスに基づいたデザインツールが多数存在します。 Web 開発では、ユーザーのカスタマイズされたデザインのニーズを満たす編集可能なベクターグラフィックアプリケーションを開発できるようにしたいと考えています。この記事では、Vue と Canvas を使用して編集可能なベクターグラフィックアプリケーションを開発する方法を紹介し、詳細なコード例を示します。準備まず、私は

Layui を使用して編集可能なフローチャートデザイナーを開発する方法 Oct 27, 2023 pm 01:07 PM

Layui を使用して編集可能なフローチャートデザイナーを開発する方法はじめに: 情報化の急速な発展に伴い、フローチャートはさまざまな業界でますます使用されています。ただし、現在市場にあるフローチャートエディタの選択肢は限られており、ほとんどは有料です。この記事では、Layui フレームワークを使用して編集可能なフローチャートデザイナーを開発する方法を紹介し、具体的なコード例を示します。 1. Layui の紹介: Layui は、豊富なコンポーネントとインターフェイスを提供するシンプルで使いやすいフロントエンドフレームワークで、

See all articles

/td> >
/td>	/td>