javascriptでtable内のtdに何か文字が入っていればその行の文字色を変更する方法

Question

実現したいこと

JavaScriptでtableの特定のセルに何かしら文字が入っていた時、そのセルがある行の
文字色を変更させる処理を考えています。

前提

現在、配置させているtableにサーブレットから受け取った情報を配置させ
セル内に文字が無いセル（td)があります。
ここに、もし何か文字が入っていればその行にある文字に色を付けたいと考えています。

下記の画像から「置換対象該当なし」という文言が入っている行の文字を変更したいと考えております。

ただ、色々と調べてみたのですが、「特定の文字」が入っていたときに色を変える処理は
ありましたが、「何か文字」が入っていた時の処理に関するものがなく困っています。

「特定の文字」でなく「何か文字」が入っていた時にその行の文字色を変えることは
可能なのでしょうか？

どなたかお力添えいただければ幸いです。

HTML

					<table class="detailList" cellpadding="5" id="tbl" border="">
						<thead>
							<tr>
								<th class="headeritemNo" rowspan="2"></th>
								<th class="headeritemOrder" rowspan="2"></th>
								<th class="headerLeft" colspan="2" align="center">【変換前】</th>
								<th class="headerCenter" rowspan="2" align="center">【項目パターン】</th>
								<th class="headerRight" colspan="2" align="center">【変換後】</th>
								<th class="headerError" rowspan="2" align="center">【エラー／警告】</th>
								<th class="headerError" rowspan="2" align="center">削除</th>
								<th class="headereditFlg" rowspan="2"></th>
							</tr>
							<tr>
								<th class="headerLeft">[項目]</th>
								<th class="headerLeft">[値]</th>
								<th class="headerRight">[項目]</th>
								<th class="headerRight">[値]</th>
							</tr>
						</thead>
						<tbody id="bodyTbl">
							<c:forEach var="DCDList" items="${DCDList}" varStatus="s">
								<tr>
									<td class="itemno_text">
										<input type="text" id="" class="itemno" name="itemno" value="${DCDList.getT_item_no()}"  style="border: none;  width: 30px;">
									</td>
									<td class="date">
										<input type="text" size="1" class="orderval" name="itemorder" id="orderID${s.count}" value="${DCDList.getT_item_order()}" readonly style="background-color: transparent; border: none;" onchange="" >
									</td>
									<td class="date	input_text">
										<input type="text" id="" class="inputval" name="input" value="${DCDList.getT_input()}" readonly style="background-color: transparent; border: none;" onchange=""></td>
									<td class="date	input_text">
										<input type="text" id="" class="inputval" name="inputdata" value="${DCDList.getT_input_date()}" readonly style="background-color: transparent; border: none;" onchange=""></td>
									<td class="date">
										<select name="itemPatern" id="itemSelect" class="selectval" disabled  style="margin: 0 auto; ">
											<c:forEach var="IPMList" items="${IPMList}" varStatus="s">
												<option value="${IPMList.getM_item_pattern_no()}"
													<c:if test="${IPMList.getM_item_pattern_no() == DCDList.getT_item_pattern_no()}">selected</c:if>>
													<c:out value="${IPMList.getM_item_pattern_name()}" /></option>
											</c:forEach>
										</select></td>
									<td class="date	input_text">
										<input type="text" id="" class="inputval" name="output" value="${DCDList.getT_output()}" readonly style="background-color: transparent; border: none;" onchange="">
									</td>
									<td class="date	input_text">
										<input type="text" id="" class="inputval" name="outputdata" value="${DCDList.getT_output_date()}" readonly style="background-color: transparent; border: none;" onchange="">
									</td>
									<td class="date">
										<input type="text" id="" class="errorval" value="${DCDList.getT_error_content()}" readonly style="background-color: transparent; border: none;">
									</td>
									<td class="date">
										<p>削除</p>
									<td>
									
									<td class="editflg_text">
										<input type="text" id="" class="errorval" name="editflg" value="${DCDList.getT_editflg()}" readonly style="background-color: transparent; border: none; width: 10px;">
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>

Comments

[Lhankor_Mhy]

補足願います。

・『セル内に文字が無いセル（td)があります。』とのことですが、ひとつ目の『セル』とふたつ目の『セル（td)』は違うものですか？　セルの中にセルがある、という理解で合っていますか？
・上の場合、tdではない方の『セル』とは何を指しますか？　inputですか？

[magmag123]

申し訳ございません。私の文章がおかしいです。

＞・『セル内に文字が無いセル（td)があります。』とのことですが、ひとつ目の『セル』とふたつ目の『セル（td)』は違うものですか？　セルの中にセルがある、という理解で合っていますか？
について

tableに配置しているそれぞれのtd(セル）に文章が入っているtd(セル）と文章が入っていないtd(セル）
があるということです。（※input type="text"のvalueが設定されていない）

画像の場合であれば７行目には「置換該当なし」というvlueは設定されているのですが、それ以外にはvalueが設定されていないということになります。

なので、セルの中にセルではなくそれぞれ独立したセル（td)になります。

[int32_t]

「<td>に何か文字が入っている」と「<td>の中の<input>に何か文字が入っている」では対処がだいぶ異なります。状況を正確に書いたほうが的確な回答が得られると思います。

[int32_t]

複数の回答が付いてますが、解決しましたか?

Answer 1

:has() を使ってもいい場合

JavaScriptなしで実現できます。
対象の <input> に required 属性を足しておきます。
tr:has(input:invalid) というセレクタで「文字の入っていない <input> を含む <tr>」を選択できます。

:has() を使えない場合

JavaScriptが必要です。
対象の <tr> すべてに対して空の<input>を含んでいたら何かクラスを足す、含んでいなかったらそのクラスを外す、という関数を作っておき、その関数をページロード時と対象 <input> に変更があったときに呼びます。クラスのかわりにカスタム属性を使ってもよいです。

Answer 2

多少無理やり（Firefoxが現時点で未対応）ですが、CSSだけでも実現できます。

tr:has(td:nth-child(7):not(:empty)){
  background: yellow;
}

jsFiddleで試作したもの