0

I'm having trouble finding a way to add 0 to empty <td>'s

In this case I have a table with some empty td's like this: <td></td>.

And the Java script would find those and add a zero. changing to <td>0</td>.

user3783243
  • 5,368
  • 5
  • 22
  • 41
Theo Toke
  • 5
  • 3
  • 5
    What's the JS you have currently? – user3783243 Aug 08 '22 at 20:08
  • 1
    Does this answer your question? [How to select of the with javascript?](https://stackoverflow.com/questions/8508262/how-to-select-td-of-the-table-with-javascript)
     – Dennis Kozevnikoff Aug 08 '22 at 20:10
  • Welcome to StackOverflow! Going off of @user3783243, could you post the JS you're currently using Theo Toke? – Chris Happy Aug 08 '22 at 20:10
  • 3
    Loop through all the td's. Get the `innerHTML`, test if it's empty, if it is, replace it with `0`. – Barmar Aug 08 '22 at 20:11
  • 1
    Welcome to SO! I recommend all new users visit [ask] for tips on writing posts that best enable the community to provide you with assistance. Your question would be aided by including the code you have already, a [mcve], and a clear explanation of the problem you are facing. The question as currently posted provides too little detail. Good luck, and happy coding! – Alexander Nied Aug 08 '22 at 20:12

2 Answers2

4

Here is a HTML and CSS only solution (no Javascript).

The benefit of not using Javascript:

  1. The Javascript code has to be run after every change to the table. The CSS-only method will always show the 0 in empty cells, and never show the 0 in non-empty cells, no manual updating necessary.
  2. The Javascript code changes empty cells to cells that contain "0", meaning that if you appended content to that cell, the 0 would still be there. With the CSS-only method, the "0" is a pseudo-element, and the td's content is still empty. The user sees a 0, but your code sees an empty box :)

Explanation of the CSS:

A 0 is displayed after any empty td in the table with id tableId.

Technical explanation:

The css selector #tableId tbody td:empty::after selects the after pseudo-element of all empty td elements in tbody elements in the element with id tableId. Then the content attribute of these pseudo-elements is set to 0.

#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>
asdf3.14159
  • 694
  • 3
  • 19
3

Use querySelectorAll and forEach

I also suggest to trim the contents

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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236