当值为空时如何隐藏表中的行？

We need to hide the row when the value is empty . but cant able to get the value of the empty column value and check it . Code used so far is

我们需要在值为空时隐藏行。但无法获取空列值的值并进行检查。到目前为止使用的代码是

(function($) {
$('#event tr').each(function() {
if ($(this).find('.event:empty').length) $(this).remove();
});





})(jQuery);

Please see the below screenshot and marked cell is empty we need to hide the entire row

请看下面的屏幕截图，标记的单元格为空，我们需要隐藏整行

HTML Structure

HTML结构

<table class="tribe-events-calendar" id="event">
          <thead>
    <tr>
            <th id="tribe-events-date" class="width-print" title="date" style="width:10%">date</th>
            <th id="tribe-events-date" class="width-print" title="Weekday" style="width:10%">Weekday</th>
    <th id="tribe-events-date" title="holiday name" style="width:20%">holiday name</th>
    <th id="tribe-events-date" title="holiday type" style="width:60%">holiday type</th>


    </tr>
      </thead>

 <tbody>
<tr>



<td style="width:15%">
 <div id="tribe-events-daynum-2-0">
 2  </div>
            </td>
            <!-- day -->
            <td style="width:15%">
            Mon</td>
            <!-- HOLIDAY NAME -->
            <td style="width:85%" class="event">

            some value

            </td>
            <!-- HOLIDAY Type-->


            <td>

            <p>National Holiday </p>

            </td>



            <!-- View More -->
                    </tr>


                    <tr>

            <!-- Day Header -->

            <td style="width:15%">
            <div id="tribe-events-daynum-2-0">
            2   </div>
            </td>
            <!-- day -->
            <td style="width:15%">
            Mon</td>
            <!-- HOLIDAY NAME -->
            <td style="width:85%" class="event">


            </td>
            <!-- HOLIDAY Type-->


            <td>

            <p>National Holiday </p>

            </td>



            <!-- View More -->
                    </tr>

            </tbody>
            </table>

4 个解决方案

#1

The td contains whitespace and it acts as textNode so :empty selector don't work here since which only select element which doesn't have any child nodes.

td包含空格并且它充当textNode所以：空选择器在这里不起作用，因为它只选择没有任何子节点的元素。

So check the text content and filter out td with whitespace or empty using filter() method.

因此，检查文本内容并使用空格过滤掉td或使用filter（）方法清空。

// get all `tr` within the table except the header
// to avoid header tr use tbody in selector
$('#event tbody tr').filter(function() {

  // get the event column, get text content,
  // trim out text and check string is empty 
  // 0(length) is falsy  value so use `!`
  return !$('.event', this).text().trim().length;

  // hide the filtered element
  // if you would like to remove then use remove() method
}).hide();

$('#event tbody tr').filter(function() {
  return !$('.event', this).text().trim();
}).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tribe-events-calendar" id="event">
  <thead>
    <tr>
      <th id="tribe-events-date" class="width-print" title="date" style="width:10%">date</th>
      <th id="tribe-events-date" class="width-print" title="Weekday" style="width:10%">Weekday</th>
      <th id="tribe-events-date" title="holiday name" style="width:20%">holiday name</th>
      <th id="tribe-events-date" title="holiday type" style="width:60%">holiday type</th>


    </tr>
  </thead>

  <tbody>
    <tr>



      <td style="width:15%">
        <div id="tribe-events-daynum-2-0">
          2</div>
      </td>
      <!-- day -->
      <td style="width:15%">
        Mon</td>
      <!-- HOLIDAY NAME -->
      <td style="width:85%" class="event">

        some value

      </td>
      <!-- HOLIDAY Type-->


      <td>

        <p>National Holiday</p>

      </td>



      <!-- View More -->
    </tr>


    <tr>

      <!-- Day Header -->

      <td style="width:15%">
        <div id="tribe-events-daynum-2-0">
          2</div>
      </td>
      <!-- day -->
      <td style="width:15%">
        Mon</td>
      <!-- HOLIDAY NAME -->
      <td style="width:85%" class="event">


      </td>
      <!-- HOLIDAY Type-->


      <td>

        <p>National Holiday</p>

      </td>



      <!-- View More -->
    </tr>

  </tbody>
</table>

#2

If your element have white spaces or new line then :empty will not be very effective. You can check for the length of the html after trimming the spaces for the same logic.

如果你的元素有空格或新行，那么：empty将不会非常有效。修剪相同逻辑的空格后，您可以检查html的长度。

(function($) {
  $('#event tbody tr').each(function() {
    if ($.trim($(this).find("td.event").html()) == "")
      $(this).remove();
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tribe-events-calendar" id="event">
  <thead>
    <tr>
      <th id "tribe-events-date" class="width-print" title="date" style="width:10%">date</th>
      <th id="tribe-events-date" class="width-print" title="Weekday" style="width:10%">Weekday</th>
      <th id="tribe-events-date" title="holiday name" style="width:20%">holiday name</th>
      <th id="tribe-events-date" title="holiday type" style="width:60%">holiday type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width:15%">
        <div id="tribe-events-daynum-2-0">
          2</div>
      </td>
      <!-- day -->
      <td style="width:15%">
        Mon</td>
      <!-- HOLIDAY NAME -->
      <td style="width:85%" class="event">
        some value
      </td>
      <!-- HOLIDAY Type-->
      <td>
        <p>National Holiday</p>
      </td>
      <!-- View More -->
    </tr>
    <tr>

      <!-- Day Header -->
      <td style="width:15%">
        <div id="tribe-events-daynum-2-0">
          2</div>
      </td>
      <!-- day -->
      <td style="width:15%">
        Mon</td>
      <!-- HOLIDAY NAME -->
      <td style="width:85%" class="event">

      </td>
      <!-- HOLIDAY Type-->
      <td>
        <p>National Holiday</p>
      </td>
      <!-- View More -->
    </tr>

  </tbody>
</table>

#3

Most likely empty isnt working because you have whitespace inside the td. Try

很可能是空的，因为你在td中有空格。尝试

<!-- HOLIDAY NAME -->
<td style="width:85%" class="event"></td>

instead of

代替

<!-- HOLIDAY NAME -->
<td style="width:85%" class="event">


</td>

#4

You can do this

你可以这样做

  $('#event tr').each(function() {
        var td= $(this).find("td");
        var _this=this;
       $(td).each(function() {
         var text = $(this).text();
         if(text=='' || text==null|| typeof text=='undefined'){
           $(_this).hide();
           }
      });
     });