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

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

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





})(jQuery);

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

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>

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

所以，检查文本内容并使用方法过滤掉带有空格或空的td

$'event tbody tr'.filterfunction{ return！$'.event'，this.text.trim； }.隐藏； 日期 周工作日 假日名称 假日类型 2. 周一 一些价值 国庆节

2. 周一 国庆节

---

最有可能的情况是空的不起作用，因为td中有空格。试一试

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

而不是

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


</td>

你可以这样做

  $('#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();
           }
      });
     });

---

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

功能${ $'event tbody tr'.eachfunction{ 如果$.trim$this.findtd.event.html== $this.remove； }; }jQuery； 日期 周工作日 假日名称 假日类型 2. 周一 一些价值 国庆节

2. 周一 国庆节

  $('#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();
           }
      });
     });