使用 Jquery/Handlebars.js 隐藏缺失值的表格单元格输出

Question

我的表格设计如下：

<tr>
  <th rowspan="6" scope="row">Payment History: <br><em>(Up to 25 months)</em></th>
  <td colspan="3">
    <table id="paymentHistory" cellspacing="1" summary="Payment History" class="table table-sm table-bordered" >
      <thead class="thead-default">
        <tr>
          <th style="white-space: nowrap;"></th>
          <th style="white-space: nowrap;">Jan</th>
          <th style="white-space: nowrap;">Feb</th>
          <th style="white-space: nowrap;">Mar</th>
          <th style="white-space: nowrap;">Apr</th>
          <th style="white-space: nowrap;">May</th>
          <th style="white-space: nowrap;">Jun</th>
          <th style="white-space: nowrap;">Jul</th>
          <th style="white-space: nowrap;">Aug</th>
          <th style="white-space: nowrap;">Sept</th>
          <th style="white-space: nowrap;">Oct</th>
          <th style="white-space: nowrap;">Nov</th>
          <th style="white-space: nowrap;">Dec</th>
        </tr>
        {{#each PaymentProfile}}
        <tr>
          <th rowspan="2">{{@key}}</th>
        </tr>
        <!--<tr>-->
        <!--{{#each this}}-->

        <!--<th style="white-space: nowrap;">{{months @key}}</th>-->
        <!--{{/each}}-->
        <!--</tr>-->
        <tr>
          {{#each this}}
          <td style="height: 42px;">{{hideEmptyData this}}</td>
          {{/each}}
        </tr>
        {{/each}}
      </thead>
    </table>
  </td>
</tr>

我有一些单元格对于某些行是空的。我从中渲染的 JSON 有一些空字段/元素，因此它们没有显示在表格上。我想隐藏那些空的单元格。

我必须编写 registerHelper 或 jquery 函数吗？我该怎么做？

 $("#paymentHistory > tbody > tr").each(function() {
            console.log("inside table");
            $td=$(this).find('td');
            if($td.text() === ''){
                $(this).css("display", "none");
            }
            // $(this).parent().hide();

        });

我正在尝试上面的代码。但我无法进入函数本身。 我无法在控制台中打印“内表”。 有人可以建议我做错什么吗？

所以我想做的是隐藏空的表格单元格。例如，在 2014 年，所有月份的元素都是空的，所以我不想显示 2014 年的行；而在 2015 年，应该只显示 JAN 到 AUG 的元素，因为其他元素是空的。

JSON数据如下：

"PaymentProfile":{  
                     "2015":{  
                        "1":"9",
                        "2":"-",
                        "3":"-",
                        "4":"-",
                        "5":"-",
                        "6":"9",
                        "7":"9",
                        "8":"B",
                        "9":" ",
                        "10":" ",
                        "11":" ",
                        "12":" "
                     },
                     "2014":{  
                        "1":" ",
                        "2":" ",
                        "3":" ",
                        "4":" ",
                        "5":" ",
                        "6":" ",
                        "7":" ",
                        "8":" ",
                        "9":" ",
                        "10":" ",
                        "11":" ",
                        "12":" "
                     }
                  },

有人可以帮帮我吗？ Output of the above code

Answer 1

使用以下代码解决了上述问题： 希望它可以帮助某人。

$('#paymentHistory tbody tr').each(function(){                       
                        var tr = $(this);                      
                        var tdNumber = tr.find('td').length;
                        var counter = 0;
                        tr.find('td').each(function () {                        
                            if ( $(this).text().trim() == '' ) counter++;                     
                        });                      
                        if ( counter == tdNumber ) tr.hide();
                    });

Answer 2

首先，不要在表格单元格上添加内联样式：height: 42px。 <td> 默认没有高度，所以如果你没有在里面放内容，它就会有height:0。现在，<tr> 是相同的 - 默认情况下它确实有 height: 0 并获取其子代的 height，这意味着如果没有任何子代，由于默认的 height 属性，它将不可见.

看例子：

<table>
  <thead>
    <th>Row</th>
    <th>C1</th>
    <th>C2</th>
    <th>C3</th>
    <th>C4</th>
    <th>C5</th>
  </thead>
  <tbody>
    <tr>
      <td>1st row</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>2nd row</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>4th row</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

第三行在 HTML 代码中，但默认不可见，因为它是空的。所以你需要做的就是去掉默认的内联样式来达到这个效果。如果您想为表格单元格添加height: 42px，请考虑使用CSS（但不是内联 - 在文件的<head> 中使用<style> 标记或从外部.css 样式表中使用<link> 标记）：

td:not(:empty) {
    height: 42px;
}

参考：:not, :empty