jquery - 表の空のセルの背景色を変更するにはどうすればよいですか?

Question

空のフィールドのみに赤い背景を付ける必要があるテーブルに 4 つの列があります。私が編集しているデータベースには、すべての列に対して 1 つのクラス (.data) があるため、各列に個々のクラスを追加して機能させる必要があるかどうか、またはそれを区別するために jQuery を使用する方法があるかどうかはわかりません。空白のセルの間を変更し、テーブルの 4 つの列のみで背景色を変更します。

Answer 1

それを行う非常に簡単な方法は次のとおりです。

$("td:empty").css('background-color', 'red');

Answer 2

あなたが望むものは本当に簡単です：

• <td>表のそれぞれについて
• <td>にテキストが含まれていない場合
• backgroundColorを赤く変更

これにより、次のようになります。

$('td').each(function () {
    if ($(this).text() == '') {
        $(this).css('backgroundColor', 'red');
    }
});

jQuery セレクターの機能を使用する別の短い方法:

$('td:empty').css('backgroundColor', 'red');

短いだけで同じです。

最後に、特殊なケースに対応できます。コードが空白でインデントされている場合、テキストが含まれていなくても、jQuery は yourが空ではない<td>と言います。<td>このケースを解決するには、次の小さなコードを使用します。

$('td').text( $.trim( $('td').text() ) );

$.trim()不要な空白を削除します。

このデモを試して理解してください。

あなたの場合、次のように適用します。

$('td').each(function () {
    $(this).text( $.trim( $(this).text() ) );
    if ($(this).text() == '') {
        $(this).css('backgroundColor', 'red');
    }
});