JavaScriptを使用してテーブルの列の背景色を変更します

キーテイクアウト

• javaScriptを使用して、テーブル行の背景色を動的に変更し、2列ごとにハードコードすることなく読みやすさを向上させたり、サーバーアプリケーションからHTMLページを再生したりすることなく向上させることができます。
1つの方法では、スタイル要素の背景色の2つのクラスを定義し、JavaScriptを使用してこれらのクラスをそれぞれ奇数および均一な行に割り当てることを伴います。
• より複雑な方法では、これらすべての色を保持し、インデックスに基づいて行に割り当てる配列を使用することにより、複数の交互の色が可能になります。
最終的な方法は、テーブルの行の数、開始色、および特定の因子の数に応じて色を計算し、勾配効果を生み出します。この方法では、読みやすさを維持するために色の組み合わせを慎重に検討する必要があります。
表形式データを提示する多くのサイトは、そのデータの読みやすさを高めるために、交互の背景色を使用します。そして、私がサイトを開発したとき、私もそれをやりたいと思っていました。問題？私の場合、テーブルはサーバー側のアプリケーションまたはスクリプトによって生成されませんでした。
明らかな解決策は、2列ごとにハードコードして、背景色が異なることを確認することでした。しかし、テーブルを動的にしたかったので、テーブルの中央に新しい行を追加することができました。 CSS3はまだ実行可能なオプションではないため、

私のソリューションはJavaScriptを使用しています。現在、ブラウザはCSS1とCSS2をサポートするのに苦労しています。 HTMLテーブルはWebページレイアウトにはお勧めしませんが、表形式データの表示に完全に適しています。このチュートリアルでは、同じアイデアに基づいて3つの例を紹介します。 WindowsプラットフォームでのみIE6、Firefox 1.0、Mozilla 1.7.3、およびOpera 7.54でソリューションをテストしました。

始めましょう

通常のHTMLテーブルから始めましょう。この場合、テーブルに頭/足の要素が含まれていないかどうか：

ここで、ブラウザがかなり新しく、必要なJavaScript機能（つまりW3C DOMサポート）があることを確認する必要があります。次の行はこのチェックを実行し、その世代のNetscape 4などを失格にします。このようなブラウザは、テーブルの色付けを試みません。

また、これらすべての例に共通していることに注意してください。このコードは次のとおりです。

例1

 
 
       

0 - some txt

1 - some txt

2 - some txt

3 - some txt

4 - some txt

この最初の例は、背景色の2つのクラスを定義したスタイル要素を使用します。

if(document.getElementById)

スタイルは柔軟です。それは、2列ごとにイタリック体に表示するなど、他の何かを定義することもできます。完全な関数は次のようになります：

var table = document.getElementById(id);   <br>
var rows = table.getElementsByTagName("tr");   <br>
for(i = 0; i 
    //manipulate rows <br>
      ...

ここでは、Modulo演算子である％が部門で残りを与えてくれます。

上記の関数は、ボディタグのオンロードイベントから呼び出す必要があります：

 
 
       

0 - some txt

1 - some txt

2 - some txt

3 - some txt

4 - some txt

結果は次のように見える可能性があります：

例2

次の例に進みましょう。もう少し冒険的なものです。 2つの交互の色を使用する代わりに、いくつかを使用したいです。これらすべての色を保持する配列を追加しましょう。

限られた数の色はHTMLで定義された名前であるため、16進値に切り替えます。結果の色は、赤、緑、青の3つの値で構成されます。 3色すべてがMax：#ffffffでオンになったときに白が達成されます。反対の黒は＃000000です。

if(document.getElementById)

行操作コードは単一の行で構成されますが、同じコードをコピーして貼り付ける代わりに、個別の関数呼び出しを行います。

var table = document.getElementById(id);   <br>
var rows = table.getElementsByTagName("tr");   <br>
for(i = 0; i 
    //manipulate rows <br>
      ...

ここでは、Doalternateと呼ばれる1つの関数も追加しました。これにより、テーブルの行の色を交互にできるさまざまな方法を簡単に切り替えることができます。 上記のフラグメントに見られるように、cssクラス名、またはhtmlタグの特定の属性を行に設定することができます：

例2の結果は、以下に示すように表示される場合があります。

<style> <br>
  .odd{background-color: white;} <br>
  .even{background-color: gray;} <br>
</style>

例3

最後の例は、テーブルの行数、開始色、および特定の係数に応じて色が計算される本当にカラフルなバリアントを示しています。

最初に、いくつかの変数を設定する必要があります：

新しい関数を追加します。

色は計算されているため、範囲外に出ないようにする必要があります。有効な値は0から255になります。色引数はRGB値に分離されていないため、16を下回る場合はパッドする必要があります。そうしないと、値は違法になります。本当に長いテーブルまたは大きなステップ値がある場合、勾配は反対方向に変わります。この関数では、青い部分が固定され、他の2つが変更されます。 この場合、数字を変換する必要がある場合、Tostringメソッドは非常に便利です。 Tostringの議論は基本です。 2バイナリの場合は2、10進数で10、160進数で16。下の画像は、Firefox 1.0、IE6、Mozilla 1.7、およびOpera 7.5の結果にテーブルがどのように表示されるかを示しています。

function alternate(id){ <br>
  if(document.getElementsByTagName){  <br>
    var table = document.getElementById(id);   <br>
    var rows = table.getElementsByTagName("tr");   <br>
    for(i = 0; i 
  //manipulate rows <br>
      if(i % 2 == 0){ <br>
        rows[i].className = "even"; <br>
      }else{ <br>
        rows[i].className = "odd"; <br>
      }       <br>
    } <br>
  } <br>
}

 <br>
... <br>
 <br>

...

...ディスプレイをあまりにもカラフルにしないように注意してください - 私たちは引き続き表形式データの読みやすさを確保したいと考えています。いくつかの色の組み合わせにより、このようなものを使用してテーブルテキストの色を変更する必要さえあるかもしれません。

 
 
       

0 - some txt

1 - some txt

2 - some txt

3 - some txt

4 - some txt

結論

CSSとJavaScriptを使用すると、サーバーアプリケーションからHTMLページを再生することなく、コードの読みやすさを追加または増加させることができます。ここで見たように、静的HTMLページに追加することもできます。これらの例を表示するには、コードを含むHTMLファイルをダウンロードしてください。 JavaScriptの背景色の変更に関するよくある質問（FAQ） JavaScriptを使用してテーブル内の特定の行の背景色を変更するにはどうすればよいですか？

テーブル内の特定の行の背景色を変更するには、JavaScriptメソッドGetElementByIDまたはQuerySelectorを使用して行を選択してから、スタイルプロパティを変更できます。例は次のとおりです。

document.getElementById（ "myrow"）。style.backgroundcolor= "red";

//または
document.queryselector（ "＃myrow"）。style.backgroundcolor = "red";
この例では、「myrow」はあなたが望んでいます。 「赤」を有効なカラー名またはカラーコードに置き換えることができます。

複数行の背景色を一度に変更できますか？ QuerySeLectorAllメソッドを使用して、変更するすべての行を選択し、ループを使用して各行の背景色を変更できます。例は次のとおりです。

var rows = document.queryselectorall（ "。myrows"）;

for（var i = 0; i lows [i] .style.backgroundcolor = "blue";

}
クリックすると、行の背景色を変更するにはどうすればよいですか？

行をクリックすると、javaScriptでオンクリックイベントを使用できます。例は次のとおりです。

document.getElementById（ "myrow"）。onclick = function（）{

this.style.backgroundcolor = "green";

}

この例では、「myrow」はあなたが変更したい行のIDです。 「グリーン」を有効なカラー名またはカラーコードに置き換えることができます。

コンテンツに基づいて行の背景色を変更できますか？ innerhtmlプロパティを使用して行のコンテンツを取得し、IFステートメントを使用してコンテンツに基づいて背景色を変更できます。例は次のとおりです。

var row = document.getElementbyid（ "myrow"）;
if（row.innerhtml.includes（ "fality"））{
row.style.backgroundcolor = "yellow";

} 列の上にホバーするときに行の背景色を変更するにはどうすればよいですか？

​​

列の背景色を変更すると、CSSのホバー擬似クラスを使用できます。例は次のとおりです。

#myrow：hover {
background-color：pink;
}
この例では、「myrow」は変更したい行のIDです。 「ピンク」を有効なカラー名またはカラーコードに置き換えることができます。

行の背景色を元の色に戻すことはできますか？変更する前に元の色を変数に保存し、この変数を使用して色を変更することができます。例は次のとおりです。

var row = document.getElementbyid（ "myrow"）;
var originalcolor = row.style.backgroundcolor; row.style.backgroundcolor = "purple";
// 「Myrow」は、変更したい行のIDです。 「紫色」を有効なカラー名またはカラーコードに置き換えることができます。

数秒ごとに行の背景色を変更するにはどうすればよいですか？

数秒ごとに行の背景色を変更するには、JavaScriptのセットインターバル関数を使用できます。例は次のとおりです。
var row = document.getElementbyId（ "myrow"）;

setinterval（function（）{

low.style.backgroundcolor = getRandomColor（）;

}、2000）;

ランダムな色を返します。数値2000はミリ秒単位（2000ミリ秒= 2秒）の間隔です。

条件に基づいて行の背景色を変更できますか？ IFステートメントを使用して条件を確認し、条件が真の場合は背景色を変更できます。例は次のとおりです。

var row = document.getElementbyid（ "myrow"）;
if（somecondition）{
row.style.backgroundColor = "orange";

}

この例では、「myrow」はあなたが順調に変えたい列です。 「オレンジ」を有効なカラー名またはカラーコードに置き換えることができます。

それを選択したときに行の背景色を変更するにはどうすればよいですか？ただし、このイベントはテーブルの行には一般的に使用されていません。これは、テキスト入力フィールドに通常使用されるためです。より一般的なアプローチは、質問3で説明したように、行をクリックするときに背景色を変更することです。

特定の列の行の背景色を変更できますか？

​​

はい、JavaScriptを使用して特定の列の行の背景色を変更できます。 CellIndexプロパティを使用して列のインデックスを取得し、インデックスが特定の列と一致する場合に行の背景色を変更できます。例は次のとおりです。

var row = document.getElementById（ "myrow"）;
if（row.cells [0] .cellindex == empicationColumn）{
row.style.backgroundcolor = "teal";
}

以上がJavaScriptを使用してテーブルの列の背景色を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。