ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery はテーブル内の行と列を選択し、単純なstyles_jqueryを変更します
jQuery はテーブル内の行と列を選択し、単純なstyles_jqueryを変更します
- WBOYオリジナル
- 2016-05-16 17:46:261466ブラウズ
jQuery は、特定の行や列の並べ替え、スタイルの変更など、テーブル処理のための非常に強力な機能を提供します。英語が十分であれば、この記事を読むことができます: jQuery テーブル操作。この記事では、jQuery ステートメントを使用してテーブル内の行と列を選択し、いくつかの簡単なスタイル変更を行う方法のみを紹介します。これが jQuery テーブル処理の詳細な学習に役立つことを願っています。
たとえば、次のようなテーブルがあります :
| 第一列 | 第二列 | 第三列 | 第四列 |
| 第一列 | 第二列 | 第三列 | 第四列 |
| 第一列 | 第二列 | 第三列 | 第四列 |
| 第一列 | 第二列 | 第三列 | 第四列 |
| 第一列 | 第二列 | 第三列 | 第四列 |
行の操作は比較的簡単です:
1。最初の行を選択したい場合は、$("tr:eq(0)") 2 . N 番目の行を選択したい場合は、 $("tr:eq(n-1)") を使用できます。
3 奇数の行を選択したい場合は、 $(" を使用できます。 tr:odd")
4. 偶数行を選択したい場合は、$("tr:even")
列の操作は少し面倒ですが、次のようにすれば難しくありません。原理を知っています。テーブルには列要素はありません。最初の列は、実際には各行の最初の領域 (td) を組み合わせたものです。したがって、ループを使用して行を選択できます。
1. 最初の列を選択してそのスタイルを変更したい場合は、次のステートメントを使用します。
コードをコピー コードは次のとおりです。
$(document).ready(function(){
$("table").find("td").each(function( i){ //テーブル内の各区間を検索
if(i%4 == 0){ //「4」は、テーブルに合計 4 つの列があることを意味します。区間番号が 4 で割り切れる場合、最初の列に属します
$(this).addClass("col_1");}//特定のスタイルを間隔
});
2. 他の列を選択する場合は、上記のコードの i%4==0 を変更し、対応する変更を加えます。覚えておいてください: 4 はテーブル内の列数を表し、列が 10 個ある場合は 10 に置き換えます。最初の列を選択すると剰余は 0 になり、2 番目の列を選択すると剰余は 1 になります。すぐ。
アップデート (2009/10/20): JOE さん、追加してくれてありがとう!私の方法ではテーブル内の列数を人為的に変更する必要がありますが、JOE の方法はコードが単純であるだけでなく、列数の制限もありません。
$("table").find("td").each(function( i){ //テーブル内の各区間を検索
if(i%4 == 0){ //「4」は、テーブルに合計 4 つの列があることを意味します。区間番号が 4 で割り切れる場合、最初の列に属します
$(this).addClass("col_1");}//特定のスタイルを間隔
});
2. 他の列を選択する場合は、上記のコードの i%4==0 を変更し、対応する変更を加えます。覚えておいてください: 4 はテーブル内の列数を表し、列が 10 個ある場合は 10 に置き換えます。最初の列を選択すると剰余は 0 になり、2 番目の列を選択すると剰余は 1 になります。すぐ。
アップデート (2009/10/20): JOE さん、追加してくれてありがとう!私の方法ではテーブル内の列数を人為的に変更する必要がありますが、JOE の方法はコードが単純であるだけでなく、列数の制限もありません。
コードをコピー
コードは次のとおりです。 $(document).ready(function( ){ $("#button1").click(function(){
$("#demo1 tr").each(function() { $(this).find("td: first") .css({color:"red", fontWeight:"bold"});
});
});
});
また、選択コンバータを変更して偶数列または奇数列を変更します。注: 最初の列は 0 から始まるため、td:odd は偶数列を表します。
});
});
});
また、選択コンバータを変更して偶数列または奇数列を変更します。注: 最初の列は 0 から始まるため、td:odd は偶数列を表します。
コードをコピー