ホームページ > 記事 > ウェブフロントエンド > jqueryテーブルの属性設定
jQuery は、HTML ドキュメント オブジェクト モデル (DOM) 操作のプログラミングを簡素化するのに役立つ人気のある JavaScript ライブラリです。 Web 開発では、テーブルを操作することが非常に一般的であり、テーブルのプロパティは jQuery を使用して簡単に設定できます。この記事では、jQuery を使用してテーブルを最適化する方法をより深く理解できるように、jQuery テーブルの属性設定を紹介します。
1. テーブルの HTML の基本構造
jQuery テーブルの属性設定を説明する前に、まず HTML テーブルの基本構造と属性を理解します。基本的な HTML テーブルは次のとおりです:
<table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>18</td> <td>男</td> </tr> <tr> <td>小红</td> <td>20</td> <td>女</td> </tr> <tr> <td>小刚</td> <td>19</td> <td>男</td> </tr> </tbody> </table>
テーブルでは、最初にテーブル ヘッダーとテーブル本体を定義する必要があります。テーブル ヘッダーでは ae20bdd317918ca68efdc799512a9b39
要素が使用され、テーブル本体は 92cee25da80fac49f6fb6eec5fd2c22a
Element を使用します。ヘッダーでは、a34de1251f0d9fe1e645927f19a896e8
要素を使用して行を定義し、b4d429308760b6c2d20d6300079ed38e
要素を使用してヘッダーのコンテンツを定義します。テーブル本体では、a34de1251f0d9fe1e645927f19a896e8
要素を使用して行を定義し、b6c5a531a458a2e790c1fd6421739d1c
要素を使用してテーブルの内容を定義します。
2. テーブル幅の設定
実際の開発ではテーブル幅の設定が必須となるため、以下では jQuery コードでテーブル幅を制御します。
$("table").width("100%");
このコードは、要素の幅を設定できる jQuery の width()
メソッドを使用します。ここではテーブルの幅を 100%
に設定します。または、600px
などの固定幅に設定することもできます。
3. テーブルの境界線の設定
テーブルの境界線の設定も非常に一般的な要件であり、以下では jQuery を使用してテーブルの境界線を設定します。
$("table").css("border", "1px solid #ccc");
このコードは、要素のスタイルを設定できる jQuery の css()
メソッドを使用します。ここでは、表の境界線の幅を 1px
に設定し、 #ccc
の実線の境界線の色。
4. テーブルの行の強調表示を設定する
テーブルでは、データの特定の行を強調表示するために行の強調表示を使用する必要がよくあります。以下では、jQuery コードを使用してテーブルの行の強調表示を実装します。
$("table tr").hover( function(){ $(this).addClass("highlight"); }, function(){ $(this).removeClass("highlight"); } );
このコードは、要素にマウス ホバー イベントを追加できる jQuery の hover()
メソッドを使用します。マウスが移動すると、addClass()
メソッドを使用して highlight
クラスを追加し、CSS スタイルを通じてクラスを制御して行の強調表示を実現します。マウスが外に移動したら、removeClass()
メソッドを使用してクラスを削除します。
5. テーブルの並べ替え
テーブル データを並べ替える必要がある場合があります。以下では、jQuery の tablesorter
プラグインを使用してテーブルの並べ替えを実装します。
$("table").tablesorter();
このコードは、jQuery の tablesorter
プラグインを使用して、テーブルに並べ替え機能を追加します。プラグインには、実際のニーズに応じて設定できる多くの構成項目があります。
6. テーブル フィルタリング
テーブルをすばやくフィルタリングするために入力ボックスを使用する必要がある場合があります。以下では、jQuery の tablefilter
プラグインを使用してテーブル フィルタリングを実装します。
$("table").tableFilter();
このコードは、jQuery の tableFilter
プラグインを使用して、テーブルにフィルタリング機能を追加します。このプラグインは、入力ボックスの内容に基づいてテーブル データをフィルタリングでき、多くのカスタム構成項目を提供します。
7. テーブルページング
テーブルデータが多い場合、ページング表示にはページング関数を使用する必要があります。以下ではjQueryのtableDnD
プラグインを使用します。テーブルページングを実装します。
$("table").tableDnD({ paging: true, pageSize: 10 });
このコードは、jQuery の tableDnD
プラグインを使用して、テーブルにページング機能を追加します。プラグインには、実際のニーズに応じて設定できる豊富な設定項目が用意されています。ここでは、paging
を true
に設定し、ページング機能を有効にし、pageSize
を 10
に設定すると、それぞれに ## が表示されます。 #10 行データ。
以上がjqueryテーブルの属性設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。