JavaScriptを使用してテーブルの列の背景色を変更します
キーテイクアウト
- javaScriptを使用して、テーブル行の背景色を動的に変更し、2列ごとにハードコードすることなく読みやすさを向上させたり、サーバーアプリケーションからHTMLページを再生したりすることなく向上させることができます。 1つの方法では、スタイル要素の背景色の2つのクラスを定義し、JavaScriptを使用してこれらのクラスをそれぞれ奇数および均一な行に割り当てることを伴います。
- より複雑な方法では、これらすべての色を保持し、インデックスに基づいて行に割り当てる配列を使用することにより、複数の交互の色が可能になります。 最終的な方法は、テーブルの行の数、開始色、および特定の因子の数に応じて色を計算し、勾配効果を生み出します。この方法では、読みやすさを維持するために色の組み合わせを慎重に検討する必要があります。
- 表形式データを提示する多くのサイトは、そのデータの読みやすさを高めるために、交互の背景色を使用します。そして、私がサイトを開発したとき、私もそれをやりたいと思っていました。問題？私の場合、テーブルはサーバー側のアプリケーションまたはスクリプトによって生成されませんでした。
- 明らかな解決策は、2列ごとにハードコードして、背景色が異なることを確認することでした。しかし、テーブルを動的にしたかったので、テーブルの中央に新しい行を追加することができました。 CSS3はまだ実行可能なオプションではないため、
始めましょう
通常のHTMLテーブルから始めましょう。この場合、テーブルに頭/足の要素が含まれていないかどうか：
ここで、ブラウザがかなり新しく、必要なJavaScript機能（つまりW3C DOMサポート）があることを確認する必要があります。次の行はこのチェックを実行し、その世代のNetscape 4などを失格にします。このようなブラウザは、テーブルの色付けを試みません。
また、これらすべての例に共通していることに注意してください。このコードは次のとおりです。
例1
<table > <br> <tr><td>0 - some txt</td></tr> <br> <tr><td>1 - some txt</td></tr> <br> <tr><td>2 - some txt</td></tr> <br> <tr><td>3 - some txt</td></tr> <br> <tr><td>4 - some txt</td></tr> <br> </table>
この最初の例は、背景色の2つのクラスを定義したスタイル要素を使用します。
if(document.getElementById)
var table = document.getElementById(id); <br>
var rows = table.getElementsByTagName("tr"); <br>
for(i = 0; i < rows.length; i++){ <br>
//manipulate rows <br>
...上記の関数は、ボディタグのオンロードイベントから呼び出す必要があります：
<table > <br> <tr><td>0 - some txt</td></tr> <br> <tr><td>1 - some txt</td></tr> <br> <tr><td>2 - some txt</td></tr> <br> <tr><td>3 - some txt</td></tr> <br> <tr><td>4 - some txt</td></tr> <br> </table>
結果は次のように見える可能性があります：
例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 < rows.length; i++){ <br>
//manipulate rows <br>
...
例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 < rows.length; i++){ <br>
//manipulate rows <br>
if(i % 2 == 0){ <br>
rows[i].className = "even"; <br>
}else{ <br>
rows[i].className = "odd"; <br>
} <br>
} <br>
} <br>
}<html> <br>
... <br>
<body onload="alternate('thetable')"> <br>
<table > <br>
<tr><td>...</td></tr> <br>
</table> <br>
...<table > <br> <tr><td>0 - some txt</td></tr> <br> <tr><td>1 - some txt</td></tr> <br> <tr><td>2 - some txt</td></tr> <br> <tr><td>3 - some txt</td></tr> <br> <tr><td>4 - some txt</td></tr> <br> </table>
結論
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メソッドを使用して、変更するすべての行を選択し、ループを使用して各行の背景色を変更できます。例は次のとおりです。
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";
} 列の上にホバーするときに行の背景色を変更するにはどうすればよいですか？
}
クリックすると、行の背景色を変更するにはどうすればよいですか？
行をクリックすると、javaScriptでオンクリックイベントを使用できます。例は次のとおりです。
document.getElementById（ "myrow"）。onclick = function（）{
}
この例では、「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"）;
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 サイトの他の関連記事を参照してください。
ホット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）
ホットトピック
7771
15
1644
14
1399
52
1296
25
1234
29
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？
Apr 04, 2025 pm 02:42 PM
フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...
javascriptの分解：それが何をするのか、なぜそれが重要なのか
Apr 09, 2025 am 12:07 AM
JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
誰がより多くのPythonまたはJavaScriptを支払われますか？
Apr 04, 2025 am 12:09 AM
スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。
JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？
Apr 04, 2025 pm 05:09 PM
同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...
JavaScriptは学ぶのが難しいですか？
Apr 03, 2025 am 12:20 AM
JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。
Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？
または：
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？
Apr 04, 2025 pm 05:36 PM
この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。
JavaScriptの進化：現在の傾向と将来の見通し
Apr 10, 2025 am 09:33 AM
JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？
Apr 04, 2025 pm 05:12 PM
Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...
