javascript - 如果文本为空，如何隐藏表格单元格

Question

fiddle :http://jsfiddle.net/rg933mpd/

HTML:

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

如果 span 为空(其中没有任何文本)，我如何从 View 中隐藏整个 TD。

Answer 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>