logo标签列表

如何在JavaScript中检查td是否为空

javascripthtmlcss
3
在我的情况下，我有一个包含1000行数据表格。因此，我不能手动检查每个单元格是否为空。所以我决定编写脚本来将空的表格数据样式设置为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 内容为“-”。

如果您使用代码片段，请在将其插入问题之前使用 Tidy 按钮。 - Andreas
4个回答
2

:empty 用于空内容。因此，您可以将其与您的css一起使用。

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

如果您想使用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
您也可以使用jQuery来实现。例如：

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

而作为样式：

.text-aligned-class {
    text-align: center;
}
1
这肯定能行，但在这种情况下使用JavaScript是如此不必要。在我看来，pc_coders的解决方案更好。 - Dennishofken
我同意。:empty本身在现代浏览器中使用相当安全，但仍然存在一些缺少支持的情况。 - Ehsan Mahmud
1
您可以尝试使用: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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接