htmlテーブル値に基づいていくつかのセルテキストの色を設定

私はhtmlテーブルを持っていて、特定の列にテキストが 'Y'または 'N'に設定されています。値が 'N'の場合、プログラムのロード時にテキストの色を赤に設定することが可能かどうかは疑問です。htmlテーブル値に基づいていくつかのセルテキストの色を設定

<table> 
    <tr> 
     <td>N</td> 
     <td>Y</td> 
    </tr> 
</table>

出典

2011-02-02 Coder 2

をやったことです。 jQueryを使用することができれば、これはあなたが記述する方法で実現します。 –

を、それは簡単です：

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 
    $('#table_id td.y_n').each(function(){ 
     if ($(this).text() == 'N') { 
      $(this).css('background-color','#f00'); 
     } 
    }); 
}); 

</script> 

</head> 
<body> 

<table id="table_id"> 
<tr><th>Question</th><th>Y/N?</th></tr> 
<tr><td>I am me.</td><td class="y_n">Y</td></tr> 
<tr><td>I am him.</td><td class="y_n">N</td></tr> 
<tr><td>I am not sure.</td><td class="y_n">Y</td></tr> 
<tr><td>This is a table.</td><td class="y_n">Y</td></tr> 
</table> 

</body> 
</html>

注：私は、上記のファイルをテストし、それが動作します。デスクトップにコピーし、yn.htmlとして保存し、ブラウザで実行します。

EDIT：if文に頼る純粋セレクタで達成していないために...

$(document).ready(function(){ 
    $("#table_id td.y_n:contains('N')").css('background-color','#fcc'); 
});

これはタイラーHolienの答えを以下ました。それは多くの関数呼び出しを必要とせず、少ないコードでより表現力豊かなので、これを行うより良い方法です。注：残念ながら、Nを含むかもしれない他のコンテンツがあり、選択されてはいけない場合は、このバージョンを使用しないでください。containsは、Nを含むすべてのテキストを選択します。

出典

2011-02-02 22:28:19

@コーダー2 - 改訂された$（document）.ready（）コードを使用して私の編集をご覧ください。私は最後のバージョンを使用します。 –

よかったです。私は最初の選択肢がより良いと思っていただろうが、「N」は設定に興味があるからだ。それが私には新しかったので、どのように '含む'機能が不明です。私は「N」と「N」と他のテキストを持っているものではなくて、ただ「N」だけを含んでいることだけを見つけることを望んでいます。 –

2つの値（Y、N）のいずれかに基づいて選択可能なテキストのみを出力する列（クラス名による）がない場合は、最初のバージョンに固執してください。それ以外の場合、例えばその列にNEINやBindなどのようなものがあった場合、それも同様に選択されます。良いキャッチ。 –

次のCSS試してみてください。jQueryを使用して

td[value="N"] { 
    color: red; 
}

出典

2011-02-02 22:26:55

いいえ、それに対応していないようです。 –

これは私のためにこの[フィドル]（http://jsfiddle.net/4r3Ue/）で働いていました。いくつかのサンプルコードを投稿できますか？ –

@タイラー - コーダー2はおそらくvalue属性を使用していません。これはTDの正式にサポートされている属性ではないため、これは珍しいことではありません。しかし面白いアプローチ。 –

これは私が私の答えを参照してください、コーダー2

$('.dataframe td').each(function(){ 
     var num = parseFloat($(this).text()); 
     if (num > 0) { 
      $(this).addClass('success'); 
      //$(this).css('color','Green'); 
     } else if (num < 0) { 
      $(this).addClass('danger'); 
      //$(this).css('color','Red'); 
     } 
    });

出典

2017-01-08 19:50:35 citynorman

htmlテーブル値に基づいていくつかのセルテキストの色を設定

答えて

関連する問題