jQuery は編集可能なテーブルを作成します (コード付き)
今回は、編集可能なテーブルを作成するための jQuery について説明します (コード付き)。jQuery で編集可能なテーブルを作成するための 注意事項 について、実際のケースを見てみましょう。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!DOCTYPE html <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jq2—可以编辑的表格</title> <link href="css/editTable.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/editTable.js"></script> <%--<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%> </head> <body> <form id="form1" runat="server"> <p> <table> <thead> <tr> <th colspan="2">鼠标点击表格项就可以编辑</th> </tr> </thead> <tbody> <tr> <th>学号</th> <th>姓名</th> </tr> <tr> <td>000001</td> <td>张三</td> </tr> <tr> <td>000002</td> <td>李四</td> </tr> <tr> <td>000003</td> <td>王五</td> </tr> <tr> <td>000004</td> <td>赵六</td> </tr> </tbody> </table> </p> </form> </body> </html>
css コード:
body {
}
table {
border:1px solid #000000;
border-collapse:collapse;/*单元格边框合并*/
width:400px;
}
table td {
border:1px solid #000000;
width:50%;
}
table th {
border:1px solid #000000;
width:50%;
}
tbody th {
background-color:#426fae;
}jquery コード
$(function () {
//找到表格中除了第一个tr以外的所有偶数行
//使用even为了通过tbody tr返回所有tr元素
$("tbody tr:even").css("background-color", "#ece9d8");
//找到所有的学号单元格
var numId = $("tbody td:even");
//给单元格注册鼠标点击事件
numId.click(function () {
//找到对应当前鼠标点击的td，this对应的就是响应了click的那个td
var tdObj = $(this);
//判断td中是否有文本框
if (tdObj.children("input").length>0) {
return false;
}
//获取表格中的内容
var text = tdObj.html();
//清空td中的内容
tdObj.html("");
//创建文本框
//去掉文本框的边框
//设置文本框中字体与表格中的文字大小相同。
//设置文本框的背景颜色与表格的背景颜色一样
//是文本框的宽度和td的宽度相同
//并将td中值放入文本框中
//将文本框插入到td中
var inputObj = $("<input type='text'>").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color", tdObj.css("background-color")).width(tdObj.width()).val(text).appendTo(tdObj);
//文本框插入后先获得焦点、后选中
inputObj.trigger("focus").trigger("select")
//文本框插入后不能被触发单击事件
inputObj.click(function () {
return false;
});
//处理文本框上回车和esc按键的操作
inputObj.keyup(function (event) {
//获取当前按下键盘的键值
var keycode = event.which;
//处理回车的情况
if (keycode==13) {
//获取当前文本框中的内容
var inputtext = $(this).val();
//将td中的内容修改为文本框的内容
tdObj.html(inputtext);
}
//处理esc的内容
if (keycode==27) {
//将td中的内容还原成原来的内容
tdObj.html(text);
}
});
});
}); 概要: この例を学習することで得られる知識ポイント:
1. HTML アスペクト
1.table には thead と tbody を含めることができます
2.この書き込みメソッドは
tag selector と呼ばれ、テーブル全体に影響を与える可能性があります。 4.table td{} は、テーブルに含まれるすべての td を表します。
2. jquery
$() に関しては、括弧内に 4 つの異なるパラメーターを入れることができます
1. パラメーターを関数に直接入れて、ページがロードされていることを示します。上の例 $(function(){} )
2. パラメーターは
css クラス セレクター であり、jquery オブジェクトにパッケージ化できます。例: 上記の例の jquery コードの 4 行目 $("tbody tr:even") 3. パラメーターが HTML テキストの場合、dom ノードを作成して jquery オブジェクトにパッケージ化できます。例: 上記の例の jquery コードの 27 行目 $("")
4. パラメーターは dom オブジェクトにすることができます。このメソッドは dom オブジェクトを に置き換えることと同じです。 jQueryオブジェクト。上記の例の jquery コードの 11 行目 var tdObj = $(this)
この例の jquery オブジェクト
1. jquery オブジェクトの後に css 属性を追加して、ノードの css 属性を設定します。たとえば、上記の例の jquery コードの 4 行目 $("tbody tr:even").css("background-color", "#ece9d8");
2 に対応する dom ノードが含まれています。配列として保存されたセレクター。
3. jquery オブジェクトの後に html メソッドを追加すると、ノードの html コンテンツを設定または取得できます。たとえば、上記の例の jquery コードの 17 行目は var text = tdObj.html() です。
4. jquery オブジェクトの後に val メソッドを追加すると、ノードの値を取得または設定できます。たとえば、上記の例では、jquery コードの 41 行目は var inputtext = $(this).val()
5. jquery オブジェクトの後に width メソッドを追加すると、ノードの幅を設定または取得できます。たとえば、上記の例の jquery コードの 27 行目 tdObj.width()
6. jquery オブジェクトの後に appendTo メソッドを追加すると、別のノードのすべての子ノードにノードを追加できます。たとえば、上記の例では、jquery コード
7 の行 27 appendTo(tdObj) で、jquery オブジェクトの後にトリガー メソッドを追加すると、js イベントの発生をトリガーできます。たとえば、上記の例では、jquery コードの 29 行目 inputObj.trigger("focus").trigger("select")
8. jquery オブジェクトの後に Children メソッドを追加すると、特定のノードの子ノードを取得できます。パラメータを設定して子ノードを制限できます。たとえば、上記の例の jquery コードの 13 行目、tdObj.children("input").length
9。セレクターによって返された jquery オブジェクトに複数の dom ノードが含まれている場合は、このオブジェクトに同様のクリック イベントを登録します。すべての dom ノードがこのイベントに対応します。たとえば、上記の例では、jquery コードの 9 行目 numId.click を参照してください。この記事の事例を読んだ後は、この方法を習得できたと思います。さらに興味深い情報については、PHP に関する他の関連記事に注目してください。中国語のサイトです！
JSON.parse() と JSON.stringify() の違いとその使用方法の詳細な説明
JS で JSON.stringify を実装する手順の詳細な説明
以上がjQuery は編集可能なテーブルを作成します (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7564
15
1386
52
87
11
28
100
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. 新規に[空のワークシート]を作成し、[セル]を選択し、[ラベル情報]を入力します。下に[ドラッグ]し、月を[塗りつぶします]。 [その他]のデータを入力し、[
条件に応じて色を自動変更する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. ルールを変更する必要がある場合は、ルールをクリアしてからルールをリセットします。
Wordの表を合計する方法を知っていますか?
Mar 21, 2024 pm 01:10 PM
Word の表で数を数えるという問題に遭遇することがあります。通常、このような問題に遭遇すると、ほとんどの生徒は Word の表を Excel にコピーして計算しますが、黙って電卓を手に取る生徒もいます。簡単に計算する方法はありますか？もちろんありますが、実はWordでも合計額を計算することができます。それで、その方法を知っていますか？今日は、一緒に見ていきましょう！困っている友達はすぐに集めてください。手順の詳細: 1. まず、コンピューターで Word ソフトウェアを開き、処理する必要がある文書を開きます。 (図のように) 2. 次に、(図のように) 合計値が配置されているセルにカーソルを置き、[メニュー バー] をクリックします。
あらゆるデバイス上の GE ユニバーサル リモート コード プログラム
Mar 02, 2024 pm 01:58 PM
デバイスをリモートでプログラムする必要がある場合は、この記事が役に立ちます。あらゆるデバイスをプログラミングするためのトップ GE ユニバーサル リモート コードを共有します。 GE リモコンとは何ですか? GEUniversalRemote は、スマート TV、LG、Vizio、Sony、Blu-ray、DVD、DVR、Roku、AppleTV、ストリーミング メディア プレーヤーなどの複数のデバイスを制御するために使用できるリモコンです。 GEUniversal リモコンには、さまざまな機能を備えたさまざまなモデルがあります。 GEUniversalRemote は最大 4 台のデバイスを制御できます。あらゆるデバイスでプログラムできるトップのユニバーサル リモート コード GE リモコンには、さまざまなデバイスで動作できるようにするコードのセットが付属しています。してもいいです
Word の表に自動番号付けまたはシリアル番号を挿入する方法
Mar 20, 2024 am 09:30 AM
表を作るとき、真っ先に思いつくのがExcelソフトで表を作ることですが、実はWordソフトを使うととても便利なのをご存知ですか?Wordソフトで表を作ると連番を入力する必要がある場合があります。いちいち手で入力するととても面倒です。実はワードソフトには数字や連番を自動で挿入できる機能があるので、エディターで自動で番号を挿入する方法を学びましょう。またはシリアル番号を Word テーブルに挿入します。 1. まず Word 文書を作成し、表を挿入します。 2. 自動シリアル番号または数字を挿入する列またはセルを選択します。 3.「スタート」－「番号」をクリックします。 4. いずれかのスタイル番号を選択します。 5.
Wordで表を縦横に切り替える方法
Mar 20, 2024 am 09:31 AM
Word ソフトは私たちにとって欠かせないものであり、頻繁に使用する必要があります。以前 Word ソフトを使用して表を編集する方法を学んだことがあります。しかし、誤って表を縦横に編集してしまった場合、時間を無駄にしたくないのです。 -作成するのですが、テーブルの縦横を変更することはできますか?毛織物?答えはもちろん「はい」です。次に、Word で表を縦横に入れ替える方法をエディターが詳しく紹介しますので、一緒に学びましょう。まず、以下の Word 表の行と列を交換する必要があります。これを行うには、まずテーブル全体を選択し、次に右クリックしてコピー機能を選択する必要があります。ステップ 2: コピーを選択した後、Word を最小化し、Excel テーブルを開き、右クリックして貼り付けを選択し、Exc に貼り付けます。
初心者がフォームを作成するためのヒントは何ですか?
Mar 21, 2024 am 09:11 AM
私たちは Excel で表を作成したり編集したりすることがよくありますが、ソフトウェアに触れたばかりの初心者にとって、Excel を使用して表を作成する方法は私たちほど簡単ではありません。以下では、初心者、つまり初心者がマスターする必要があるテーブル作成のいくつかの手順について演習を行います。初心者向けのサンプルフォームを以下に示します。入力方法を見てみましょう。 1. Excel ドキュメントを新規作成するには 2 つの方法があります。 [デスクトップ]-[新規作成]-[xls]ファイル上の何もない場所でマウスを右クリックします。 [スタート]-[すべてのプログラム]-[Microsoft Office]-[Microsoft Excel 20**] を実行することもできます。 2. 新しい ex ファイルをダブルクリックします。
