how to check td is empty or not in javascript

Question

in my case i have 1000 rows data table.so i cant cant check each every td is empty or not in myself. so i decide to write script for empty table data style for text-align:center and content: '-' . i don't have idea for how to do it so guys please help me.

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<div class="col-md-12 col-sm-6">
  <div class="table-style-1">
    <div class="round-box"><img class="sppb-img-responsive img-responsive" src="<?= base_url('media/images/') ?>associates-flag-8.jpg" alt=""></div>
    <div class="head"><span>OUR MAJOR CLIENTS IN OMAN</span>
    </div>
    <table class="table table-bordered client-1">
      <thead>
        <tr>
          <th>COMPANY NAME</th>
          <th>CITY</th>
          <th>SERVICES</th>
        </tr>
      </thead>
      <tbody class="EMIRATES">
        <tr>
          <tr>
            <td>Dream Tourist Village </td>
            <td></td>
            <td>Hotel / Resort
            </td>
          </tr>
          <tr>
            <td>City Seasons Muscat </td>
            <td></td>
            <td>Hotel / Resort</td>
          </tr>
          <tr>
            <td>
              Tawoos Industrial Services Company LLC </td>
            <td></td>
            <td>Catering Company </td>
          </tr>
          <tr>
            <td>S.J. Abed & Al Sulaimi Catering Group LLC </td>
            <td></td>
            <td>
            </td>
          </tr>
          <tr>
            <td>Ministry of Defence </td>
            <td></td>
            <td>Ministry of Defense</td>
          </tr>
          <tr>
            <td>The Sultan Special Force </td>
            <td></td>
            <td>Ministry of Defense</td>
          </tr>
          <tr>
            <td>Port Services Corporation SAOG </td>
            <td></td>
            <td>Port Operation </td>
          </tr>
          <tr>
            <td>Port of Salalah</td>
            <td></td>
            <td>Port Operation </td>
          </tr>
          <tr>
            <td> </td>
            <td></td>
            <td>Ready Made Garment Factories </td>
          </tr>
          <tr>
            <td>
              Al Buraimi Garments, Tailoring & Embroidery L.L.C </td>
            <td></td>
            <td>Ready Made Garment Factories </td>
          </tr>
          <tr>
            <td>Starbag Company. WLL </td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>Shanfari& Partners Company LLC. </td>
            <td></td>
            <td>
              Maintenance/Engineering/ Construction/Contracting Company </td>
          </tr>
          <tr>
            <td>Al Nadha United LLC </td>
            <td></td>
            <td>Maintenance/Engineering/ Construction/Contracting Company </td>
          </tr>
          <tr>
            <td>Al Obaidani Group </td>
            <td></td>
            <td>Maintenance/Engineering/ Construction/Contracting Company </td>
          </tr>
          <tr>
            <td>
              Cement Marketing Co. LLC </td>
            <td></td>
            <td> </td>
          </tr>
      </tbody>
    </table>
  </div>
</div>

every empty td is need to be center and css content is "-".

Answer 1

You can try using :empty and :after like the following way:

td:empty:after {
  content: '-';
  display: block;
  text-align: center;
}

table, th, td{
  border: 1px solid black;
  border-collapse: collapse;
}

td:empty:after {
  content: '-';
  display: block;
  text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 col-sm-6">
  <div class="table-style-1">
      <div class="round-box">
        <img class="sppb-img-responsive img-responsive"
        src="<?= base_url('media/images/') ?>associates-flag-8.jpg"
        alt="">
      </div>
      <div class="head"><span>OUR MAJOR CLIENTS IN OMAN</span>

      </div>
    <table class="table table-bordered client-1">
      <thead>
        <tr>
          <th>COMPANY NAME</th>
          <th>CITY</th>
          <th>SERVICES</th>
        </tr>
      </thead>
      <tbody class="EMIRATES">
      <tr>
        <td>Dream Tourist Village </td>
        <td></td>
        <td>Hotel / Resort </td>
      </tr>
      <tr>
        <td>City Seasons Muscat </td>
        <td></td>
        <td>Hotel / Resort</td>
      </tr>
      <tr>
        <td>    
        Tawoos Industrial Services Company 
        LLC </td>
        <td></td>
        <td>Catering Company </td>
      </tr>
      <tr>
        <td>S.J. Abed & Al Sulaimi Catering Group 
        LLC </td>
        <td></td>
        <td>
        </td>
      </tr>
      <tr>
        <td>Ministry of Defence </td>
        <td></td>
        <td>Ministry of Defense</td>
      </tr>
      <tr>
        <td>The Sultan Special Force </td>
        <td></td>
        <td>Ministry of Defense</td>
      </tr>
      <tr>
        <td>Port Services Corporation SAOG </td>
        <td></td>
        <td>Port Operation </td>
      </tr>
      <tr>
        <td>Port of Salalah</td>
        <td></td>
        <td>Port Operation </td>
      </tr>
      <tr>
        <td> </td>
        <td></td>
        <td>Ready Made Garment 
        Factories </td>
      </tr>
      <tr>
        <td>    
        Al Buraimi Garments, Tailoring & 
        Embroidery L.L.C </td>
        <td></td>
        <td>Ready Made Garment 
        Factories </td>
      </tr>
      <tr>
        <td>Starbag Company. WLL </td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>Shanfari& Partners Company LLC. </td>
        <td></td>
        <td>    
        Maintenance/Engineering/
        Construction/Contracting 
        Company </td>
      </tr>
      <tr>
        <td>Al Nadha United LLC </td>
        <td></td>
        <td>Maintenance/Engineering/
        Construction/Contracting 
        Company </td>
      </tr>
      <tr>
        <td>Al Obaidani Group </td>
        <td></td>
        <td>Maintenance/Engineering/
        Construction/Contracting 
        Company </td>
      </tr>
      <tr>
        <td>    
        Cement Marketing Co. LLC </td>
        <td></td>
        <td> </td>
      </tr>

      </tbody>
    </table>

  </div>
</div>

Answer 2

here is a solution if You want to use JS, it can use for checking any condition of your table.

happy coding .

const elements = document.getElementsByTagName('td');
Array.from(elements).forEach((element, index) => {
  if (element.innerText == '') {
    //console.log(element.innerText)
    element.style.textAlign = "center"
    element.innerHTML = '-'
  }
});

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <div class="col-md-12 col-sm-6">
    <div class="table-style-1">
      <div class="round-box"><img class="sppb-img-responsive img-responsive" src="<?= base_url('media/images/') ?>associates-flag-8.jpg" alt=""></div>
      <div class="head"><span>OUR MAJOR CLIENTS IN OMAN</span>

      </div>
      <table class="table table-bordered client-1">
        <thead>
          <tr>
            <th>COMPANY NAME</th>
            <th>CITY</th>
            <th>SERVICES</th>
          </tr>
        </thead>
        <tbody class="EMIRATES">
          <tr>

            <tr>
              <td>Dream Tourist Village </td>
              <td></td>
              <td>Hotel / Resort
              </td>
            </tr>
            <tr>
              <td>City Seasons Muscat </td>
              <td></td>
              <td>Hotel / Resort</td>
            </tr>
            <tr>
              <td>
                Tawoos Industrial Services Company LLC </td>
              <td></td>
              <td>Catering Company </td>
            </tr>
            <tr>
              <td>S.J. Abed & Al Sulaimi Catering Group LLC </td>
              <td></td>
              <td>
              </td>
            </tr>
            <tr>
              <td>Ministry of Defence </td>
              <td></td>
              <td>Ministry of Defense</td>
            </tr>
            <tr>
              <td>The Sultan Special Force </td>
              <td></td>
              <td>Ministry of Defense</td>
            </tr>
            <tr>
              <td>Port Services Corporation SAOG </td>
              <td></td>
              <td>Port Operation </td>
            </tr>
            <tr>
              <td>Port of Salalah</td>
              <td></td>
              <td>Port Operation </td>
            </tr>
            <tr>
              <td> </td>
              <td></td>
              <td>Ready Made Garment Factories </td>
            </tr>
            <tr>
              <td>
                Al Buraimi Garments, Tailoring & Embroidery L.L.C </td>
              <td></td>
              <td>Ready Made Garment Factories </td>
            </tr>
            <tr>
              <td>Starbag Company. WLL </td>
              <td></td>
              <td></td>
            </tr>

            <tr>
              <td>Shanfari& Partners Company LLC. </td>
              <td></td>
              <td>
                Maintenance/Engineering/ Construction/Contracting Company </td>
            </tr>
            <tr>
              <td>Al Nadha United LLC </td>
              <td></td>
              <td>Maintenance/Engineering/ Construction/Contracting Company </td>
            </tr>
            <tr>
              <td>Al Obaidani Group </td>
              <td></td>
              <td>Maintenance/Engineering/ Construction/Contracting Company </td>
            </tr>
            <tr>
              <td>
                Cement Marketing Co. LLC </td>
              <td></td>
              <td> </td>
            </tr>

        </tbody>
      </table>

    </div>
  </div>
</body>

</html>

Answer 3

:empty is used for empty contents. So you can use this with your css

td:empty{
   text-align:center;
}
td:empty:before{
  content:"-"
}

Answer 4

You can also use jQuery to achieve that. Example:

$('td:empty').each(function(){
   $(this).addClass('text-aligned-class');
   $(this).html('-');
})

And as a style:

.text-aligned-class {
    text-align: center;
}