値に基づいてテーブルエントリの色を塗る方法

Question

私がしたいことは、コンテンツ "x"がすべて赤のすべての<td>アイテムを赤くすることです。

そうで：

<table> 
    <tr> 
     <td>Mini Contests</td> 
     <td>5</td> 
     <td>5.0</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
    </tr> 
</table> 

最後の4つのエントリは赤でなければなりません。

Answer 1

TDのスタイリングにはnth-last-childを使用できます。 このコードは、最後の4つの項目（赤に色が変化）に影響されます：

td:nth-last-child(-n+4) { 
    color: red; 
} 

をそして、この1つは彼らの背景が赤になり：

td:nth-last-child(-n+4) { 
     background: red; 
    } 

Answer 2

あなたは周囲のクラスを持つ要素を追加することなくすることはできません

第一：

<td><span class="redbg">x</span></td> 

Answer 3

はそれを得るためにX.あなたは次のように行うことができますで2ページ目のセットのクラスの開始

.red { 
    background: red; 
} 

：その後、テーブルと他のhtmlコード

第三あなたを置く：

：ページの最後には「X」を含むすべてのセルにクラス redを適用JavaScriptを使用以下は

<script> 
    var cells = document.getElementsByTagName("td"); 
    for (i=0; i<cells.length; i++) { 
     if(cells[i].innerHTML == "x") cells[i].className = "red"; 
    } 
</script> 

実施例である：

var cells = document.getElementsByTagName("td"); 
 
    for (i=0; i<cells.length; i++) { 
 
     if(cells[i].innerHTML == "x") cells[i].className = "red"; 
 
    }

.red { 
 
    background: red; 
 
} 
 

 
td{ 
 
    width: 80px; 
 
}

<table> 
 
    <tr> 
 
     <td>Mini Contests</td> 
 
     <td>5</td> 
 
     <td>5.0</td> 
 
     <td>x</td> 
 
     <td>x</td> 
 
     <td>x</td> 
 
     <td>x</td> 
 
    </tr> 
 
</table>