как проверить, что td пуст или нет в javascript - PullRequest
Новая
       0

как проверить, что td пуст или нет в javascript

3 голосов
/ 09 мая 2020

в моем случае у меня есть таблица данных 1000 строк. Поэтому я не могу проверить, что каждый td пуст или нет в себе. поэтому я решил написать сценарий для стиля данных пустой таблицы для text-align: center и content: '-'. Я не знаю, как это сделать, так что, ребята, помогите мне. 

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>

каждый пустой td должен быть в центре, а css содержимое - «-».

Ответы [ 4 ]

2 голосов
/ 09 мая 2020

:empty используется для пустого содержимого. Таким образом, вы можете использовать это со своим css

td:empty{
   text-align:center;
}
td:empty:before{
  content:"-"
}
1 голос
/ 09 мая 2020

вот решение, если вы хотите использовать JS, его можно использовать для проверки любого состояния вашей таблицы.

счастливое кодирование. 

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>
1 голос
/ 09 мая 2020

Вы можете попробовать использовать :empty и :after следующим образом: 

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>
1 голос
/ 09 мая 2020

Вы также можете использовать jQuery для этого. Пример: 

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

И как стиль: 

.text-aligned-class {
    text-align: center;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...