1

私は現在、Oracle APEX アプリケーションの作成を支援しており、私のタスクは、ユーザーの入力に基づいてテーブル内のセルを自動的にセルの背景を「作成」できるようにすることでした。例: ユーザーが AL (Annual Leave) を入力すると、背景が黄色にフォーマットされます。ユーザーが X を入力すると、セルの背景が灰色にフォーマットされます。ユーザーが C (トレーニング コース) を入力すると、「peach」にフォーマットされます。

私はすでにここを見回していくつかのガイドを見つけましたが、特にこれに関するものはありません。そのため、新しい質問をすることにしました.

フォーマットしたいテーブルのサンプル: 例

これは、ある程度の知識があるjavascriptで実行できると言われました.CSSでこれを実行できるかどうか疑問に思っていましたか? HTMLは不可能なので。

4

1 に答える 1

2

リージョンに静的 ID を付与します。これらのスタイル ルールを、ページの見出しなどのどこかに配置します。

<style>
.annual{
background-color:yellow;
}
.ex{
background-color:grey;
}
.trainingcourse{
background-color:peach;
}
</style>

この JavaScript を実行しますが、STATICID をレポートの静的 ID に置き換えます。必要に応じてケースとクラスを追加します。ここでの利点は、jquery を使用するのではなく、CSS から外観を操作できることです。必要に応じて、すぐに背景色を割り当てることができますが、私自身の好みは、これを分離しておくことです。

$("#report_STATICID td[headers]").each(function(){
   var lTest = $(this).text(), lClass;
   switch(lTest){
      case 'AL':
         lClass = "annual";
         break;
      case 'X':
         lClass = "ex";
         break;
      case 'C':
         lClass = "trainingcourse";
         break;
   };
   if(lClass){
      $(this).addClass(lClass);
   };
})

編集: コメントから明らかなように、使用しているテーマ、したがって地域のテンプレートは、これらの問題において非常に重要です。
(注: 以下のサンプルでは、​​静的 ID empreport の emp テーブルでの選択に基づく単純なクラシック レポートを使用しています)
この場合、@Robovisits はテーマ 13 - クラシック ブルーを使用しています。最初にチェックするのはマークアップです。
テーマ 13 のレポートに関する HTML スニペットのスクリーンショット
これにより、セレクターが正しいかどうか、正しい要素をターゲットにするかどうかを識別できます。これを確認する最善の方法は、ブラウザーの開発者ツールでコンソールからセレクターを実行し、戻り値を調べることです。
このコードを実行すると: 

$("#report_empreport td[headers]").each(function(){
   var lTest = $(this).text(), lClass;
   switch(lTest){
      case 'KING':
         lClass = "class1";
         break;
      case 'PICARD':
         lClass = "class2";
         break;
      case 'FRANCINE':
         lClass = "class3";
         break;
   };
   if(lClass){
      $(this).addClass(lClass);
   };
})

次に、これの影響を受けると思われる列を右クリックし、要素を検査することを選択します (この場合、Chrome の開発ツールを使用しています)。
HTML ペインの影響を受ける要素
よし、KING が入っている私のセルは実際に正しいクラスを受け取りました。では、なぜ色が付かないのでしょうか。
CSS を使用して色を付けたいので、影響を受ける要素を html ペインで選択する必要があります。その後、右側の CSS ペインで確認
オーバーライド前の CSS ペインの概要
できます。ご覧のとおり、class1 の CSS がオーバーライドされています。ここで起こることは、より具体的な別のルールが私たちのルールよりも優先されるということです。率直に言えば、セレクターが具体的であるほど、ルールを適用する際の優先度が高くなります。これは、私が使用しているセレクターに「重み」を与えることで修正できます。 

body table.t13Standard td.class1{
background-color:yellow;
}

オーバーライド後の CSS ペイン

注: !important を使用して、特定性に関係なく単純にオーバーライドするオプションもあります。実際に意味がない限り、私は通常それを避けます。次のようになります。

.class1{
background-color:yellow !important;
}

色！

于 2013-07-23T14:43:24.207 に答える