在空td上添加0

Question

我很难找到将0添加到空<td>的的方法

在这种情况下，我有一个包含一些空td的表，如下所示：CCD_ 2。

Java脚本会找到这些并添加一个零。变为CCD_ 3。

Answer 1

这里有一个仅HTML和CSS的解决方案(没有Javascript(

不使用Javascript的好处：

1. 每次更改表后都必须运行Javascript代码。纯CSS方法将始终在空单元格中显示0，而从不在非空单元格中展示0，无需手动更新
2. Javascript代码将空单元格更改为包含"；0"；，这意味着，如果将内容附加到该单元格，则0仍将存在。利用仅CSS的方法；0"；是一个伪元素，并且td的内容仍然为空。用户看到一个0，但您的代码看到一个空框：(

CSS的解释：

在id为tableId的表中，在任何空的td之后显示0。

技术说明：

css选择器#tableId tbody td:empty::after选择id为tableId的元素中的tbody元素中的所有空td元素中的after伪元素。然后这些伪元素的CCD_ 12属性被设置为CCD_。

#tableId tbody td:empty::after {
content: "0";
}

<table id="tableId">
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>

Answer 2

使用querySelectorAll和forEach

我还建议修剪的内容

document.querySelectorAll("#tableId tbody td").forEach(td => {
if (td.textContent.trim() === "") td.textContent = 0;
});

<table id="tableId">
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>