for文でテーブルに追加される変数の値の文字の色の変更方法

Question

htmlのテーブルに、Javascriptのデータ内で、
$('<tr></tr>').append('<td>'+変数（中身は数値）+'</td>')
繰り返し・・・
で値を追加している状態です。
変数はcsvデータから取得したもので、for文を用いて値の追加が繰り返されています。
この変数が10未満のとき、文字の色を変更するコードの書き方がわかりません。

どなたか教えていただけると助かります。よろしくお願いいたします。

Answer 1

変数が順列にでてくるのであれば、単純に行数で分けるてもあります

<style>
tr:nth-child(-n+10){color:red;}
</style>

Answer 2

<table></table>

[data-i="1"] {
	background-color: red;
}

var i = 0;
while( i < 20 ) {
	++i;
	$( 'table' ).append( $( '<tr></tr>' ).attr( 'data-i', ( i < 10 ? 1 : 0 ) ).append( '<td>' + i +'</td>' ) );
}
```**動くサンプル：**[https://jsfiddle.net/eakbesq9/](https://jsfiddle.net/eakbesq9/)

---

【属性セレクタ - CSS | MDN】
[https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors](https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors)

Answer 3

meterを使えば判定すらいらない
……と思いましたが文字でなくなってしまいますね。

let data = [98, 10, 9.9, 11, 3, 72];
let tbody = $('tbody');
let temp = $('<tr><td><meter min="0" max="100" low="10"></meter></td></tr>');
for (let datum of data) {
	let tr = temp.clone();
	tr.find('meter').val(datum).text(datum);
	tbody.append(tr);
}