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（但不能内联） - 在文件的<style>中使用<head>标记，或者使用<link>外部.css样式表）：

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

参考：:not，:empty

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

2 个答案: