如果文本为空，如何隐藏表格单元格答案

【问题标题】：How to hide a table cell if a text is empty如果文本为空，如何隐藏表格单元格
【发布时间】：2015-12-08 04:58:00
【问题描述】：

HTML：

<td style="padding: 15px; text-align: center;" colspan="3">
    <div class="alert info">
        <p>
            <span class="lblInsMsg"></span>
        </p>
    </div>
</td>

如果跨度为空白（其中没有任何文本），我如何隐藏整个 TD。

【问题讨论】：

How can I hide empty html table cells with jQuery?的可能重复

标签： javascript jquery html css

【解决方案1】：

您需要使用 filter()

执行类似的操作

$('td').filter(function() {
  return $(this).find('.lblInsMsg').text().trim() == '';
}).hide();

.hideIt
{
	display: none;
}
	 .alert.info {
    border-color: #94dbff;
    color: #0091DC;
}
.alert {
    background: #ffffff;
    border: 1px solid #bbbbbb;
    color: #6D6D6D;
    padding: 10px 10px 10px 60px;
    margin-bottom: 20px;
    position: relative;
	margin: 0 auto;
	width: 350px;
}
.alert.info:before {
    background: url(images/info.png) no-repeat center center #bce9ff;
}
.alert:before {
    background: #bbbbbb;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50px;
    content: '';
    position: absolute;
}
.alert p {
    margin: 0;
	text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td style="padding: 15px; text-align: center;" colspan="3">
      <div class="alert info">
        <p>
          <span class="lblInsMsg"></span>
        </p>
      </div>
    </td>
    <td style="padding: 15px; text-align: center;" colspan="3">
      <div class="alert info">
        <p>
          <span class="lblInsMsg">ss</span>
        </p>
      </div>
    </td>
    <table>
      <tr>
        <td style="padding: 15px; text-align: center;" colspan="3">
          <div class="alert info">
            <p>
              <span class="lblInsMsg">dd</span>
            </p>
          </div>
        </td>
        <td style="padding: 15px; text-align: center;" colspan="3">
          <div class="alert info">
            <p>
              <span class="lblInsMsg">ss</span>
            </p>
          </div>
        </td>

或者

$('td').filter(function() {
  return $(this).find('.lblInsMsg').is(':empty');
}).hide();

.hideIt {
  display: none;
}
.alert.info {
  border-color: #94dbff;
  color: #0091DC;
}
.alert {
  background: #ffffff;
  border: 1px solid #bbbbbb;
  color: #6D6D6D;
  padding: 10px 10px 10px 60px;
  margin-bottom: 20px;
  position: relative;
  margin: 0 auto;
  width: 350px;
}
.alert.info:before {
  background: url(images/info.png) no-repeat center center #bce9ff;
}
.alert:before {
  background: #bbbbbb;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50px;
  content: '';
  position: absolute;
}
.alert p {
  margin: 0;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td style="padding: 15px; text-align: center;" colspan="3">
      <div class="alert info">
        <p>
          <span class="lblInsMsg"></span>
        </p>
      </div>
    </td>
    <td style="padding: 15px; text-align: center;" colspan="3">
      <div class="alert info">
        <p>
          <span class="lblInsMsg">ss</span>
        </p>
      </div>
    </td>
    <table>
      <tr>
        <td style="padding: 15px; text-align: center;" colspan="3">
          <div class="alert info">
            <p>
              <span class="lblInsMsg">dd</span>
            </p>
          </div>
        </td>
        <td style="padding: 15px; text-align: center;" colspan="3">
          <div class="alert info">
            <p>
              <span class="lblInsMsg">ss</span>
            </p>
          </div>
        </td>

【讨论】：

我想我可以使用一个类来代替 TD，因为页面中还有其他我不想触摸的 TD。谢谢。
我一直在寻找我自己处理的td。不过，感谢您向我展示它是如何完成的路径。再次感谢。 +1 并被接受。
@SiKni8 ：很高兴为您提供帮助

【解决方案2】：

在您的 js 代码中，$(this) 指的是窗口对象。

这段代码对我有用

if ($('.lblInsMsg').is(':empty')) {
    //do something
    $('.lblInsMsg').parent().parent().parent().addClass("hideIt"); //doesn't hide the TD
    alert("empty"); // shows up
}

【讨论】：

感谢您的回复。 +1