如何显示不同的图像取决于td值?

Question

我正在使用wordpress，并希望在类似的功能中构建一个具有货运跟踪的页面。

即，如果包裹已交付并且该交付结果单元格不为空，则显示彩色图像，否则显示灰色图像。

我的交货结果单元格的 ID 为"F1"，为空

<td id="f1"><td>

之后我尝试遵循代码但没有成功

<script>
var x = document.getElementById ( "f1" );
if (x == null){
document.write('<img src="/wp-content/uploads/2021/01/airplane_off.png" style="width: 512px; height: 512px; margin: 1px;" />');
}
else{
document.write('<img src="/wp-content/uploads/2021/01/airplane_on.png" style="width: 512px; height: 512px; margin: 1px;" />');
}
</script>

感谢您的帮助

Answer 1

如果我理解正确，您正在寻找内部 html 是否为空。

您应该能够使用以下innerHTML判断内容是否为空白：

var x = document.getElementById("f1");
if (x && x.innerHTML.trim() == ""){
document.write('<img src="/wp-content/uploads/2021/01/airplane_off.png" style="width: 512px; height: 512px; margin: 1px;" />');
}
else{
document.write('<img src="/wp-content/uploads/2021/01/airplane_on.png" style="width: 512px; height: 512px; margin: 1px;" />');
}

请注意，您的示例使用<td id="f1"><td>。该标记未关闭，如果页面中也有该标记，则会导致问题。

需要注意的另一件事是，td需要位于适当的表结构中(这意味着在需要位于table内的tr内部)，否则您将无法定位它。

Answer 2

您提供的代码几乎是正确的。尝试在getElementById()后提供 innerHTML

var data = document.getElementById ( "f1" );
if (x.innerHTML === ''){
document.write('<img src="/wp-content/uploads/2021/01/airplane_off.png" style="width: 512px; height: 512px; margin: 1px;" />');
}
else{
document.write('<img src="/wp-content/uploads/2021/01/airplane_on.png" style="width: 512px; height: 512px; margin: 1px;" />');
}